/* ============================================================
   tokens.css — Dala design language (from DESIGN.md)
   Single source of truth for colors, type, spacing, radii.
   ============================================================ */

:root {
  /* --- Colors --- */
  --color-void: #000000;
  --color-bone-white: #ffffff;
  --color-ash-gray: #9a9a9a;
  --color-silver-mist: #bdbdbd;
  --color-electric-iris: #8052ff;
  --color-saffron-spark: #ffb829;
  --color-deep-verdant: #15846e;

  /* Semantic aliases */
  --text-primary: var(--color-bone-white);
  --text-secondary: var(--color-ash-gray);
  --text-tertiary: var(--color-silver-mist);
  --accent: var(--color-electric-iris);
  --emphasis: var(--color-saffron-spark);

  /* Iris with alpha — used only for the approved hairline/grouping compromise */
  --iris-08: rgba(128, 82, 255, 0.08);
  --iris-14: rgba(128, 82, 255, 0.14);
  --iris-24: rgba(128, 82, 255, 0.24);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* Opportunity score: green is good, amber is middling, red is weak */
  --score-good: #37c978;
  --score-fair: #ffb829;
  --score-poor: #ff5468;

  /* --- Typography --- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  /* Scale (size / line-height / tracking) */
  --text-caption: 12px;      --leading-caption: 1.5;
  --text-nav-label: 14px;    --leading-nav-label: 1.2;   --tracking-nav-label: 0.35px;
  --text-body: 18px;         --leading-body: 1.5;
  --text-heading-2xs: 24px;  --leading-heading-2xs: 1.25; --tracking-heading-2xs: -0.48px;
  --text-heading-xs: 27px;   --leading-heading-xs: 1;
  --text-subheading: 36px;   --leading-subheading: 1.2;
  --text-heading-sm: 42px;   --leading-heading-sm: 1.2;  --tracking-heading-sm: -1.68px;
  --text-heading: 48px;      --leading-heading: 1.1;     --tracking-heading: -1.68px;
  --text-heading-lg: 78px;   --leading-heading-lg: 1.1;  --tracking-heading-lg: -3.12px;
  --text-display: 113px;     --leading-display: 1.1;     --tracking-display: -4.52px;

  /* Weights */
  --weight-extralight: 200;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Spacing (6px base) --- */
  --space-6: 6px;
  --space-12: 12px;
  --space-18: 18px;
  --space-24: 24px;
  --space-30: 30px;
  --space-36: 36px;
  --space-60: 60px;
  --space-96: 96px;
  --space-120: 120px;

  /* --- Layout --- */
  --page-max: 1280px;
  --content-max: 720px;

  /* --- Radii --- */
  --radius: 24px;
  --radius-full: 9999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 640ms;
}

/* Responsive display scale — the 113px/78px headlines must shrink on small screens */
@media (max-width: 900px) {
  :root {
    --text-display: 64px;   --tracking-display: -2.4px;
    --text-heading-lg: 52px; --tracking-heading-lg: -2px;
    --text-heading: 38px;   --tracking-heading: -1.2px;
    --text-heading-sm: 32px; --tracking-heading-sm: -1.2px;
  }
}

@media (max-width: 520px) {
  :root {
    --text-display: 46px;   --tracking-display: -1.6px;
    --text-heading-lg: 40px; --tracking-heading-lg: -1.4px;
    --text-body: 17px;
  }
}