/* مسیری نو — design-system tokens (public/ds/tokens.css)
 *
 * The only definition of every design token. Every page links this sheet
 * first, before any other stylesheet (docs/claude/COMPONENTS.md, «cascade
 * rule»), so a token is spelled once for the whole product: the landing, the
 * game, the panel, sign-in, the counsellor pages and every page without an
 * artboard read the same :root.
 *
 * Until ۱۴۰۵/۰۷/۰۱ the same ~180 names were copied into styles.css, game.css,
 * login.css and panel.css, byte-identical by test, and a name one shell lacked
 * was a name the other three could not spend. Those copies are gone; the union
 * of the four landed here with the value every shell already computed, so the
 * move repainted nothing. The four map names (--sea, --sea-shallow,
 * --sea-label, --neighbor-land) are the v31 names production never had.
 *
 * Rules for this file:
 *   · custom properties on :root only — no element, class or layout rule, so
 *     linking it on a page that never spends a token changes nothing there;
 *   · values are v31's (design/redesign-1405-06-29/tokens.css); where the
 *     artboard and a later pass differ, the artboard wins (owner decision 27);
 *   · an old production name stays as an alias of its v31 name, never a
 *     second value, so the two cannot drift apart.
 */
:root {
  /* ── Colour roles: energy · hope · calm (docs/COLOR_SYSTEM.md) ──────────
     Declared once, here. Until the design-system layer (۱۴۰۵/۰۷/۰۱) the four
     shells each carried a byte-identical copy; test/color-system.test.mjs now
     holds that no shell declares any of these names again. A role is
     a job, not a hue: energy asks you to act, hope marks where you are going,
     calm holds what you read.

     Owner decision, ۱۴۰۵/۰۶/۳۰: the pastel ramps of ۲۸ شهریور are replaced by
     the saturated v31 palette (design/redesign-1405-06-29/tokens.css). The
     roles keep their names and their jobs; only the colours moved. Two inks,
     not one: the tint stops (50–200) carry the role's own ink at 6:1 or more,
     and the solid stops (300–400), which are the CTA gradient, carry
     --cta-ink — because a brown ink on #ff7a00 is 4.59:1 and the page ink is
     5.62:1. No white word on orange, ever. */
  --energy-50: #fff4e6;
  --energy-100: #ffe3c4;
  --energy-200: #ffd2a8;
  --energy-300: #ffb366;
  --energy-400: #ff7a00;
  --energy-ink: #7c2d12;
  --energy-line: #ff9f45;
  --hope-50: #fffbeb;
  --hope-100: #fef3c7;
  --hope-200: #fde68a;
  --hope-300: #fcd34d;
  --hope-ink: #78350f;
  --calm-50: #f0fdf4;
  --calm-100: #dcfce7;
  --calm-200: #bbf7d0;
  --calm-300: #86efac;
  --calm-ink: #14532d;
  --grad-energy: linear-gradient(90deg, #ff7a00, #ffb366);
  --grad-energy-hover: linear-gradient(90deg, #f57300, #ffa84f);
  --grad-hope: linear-gradient(90deg, #fffbeb, #fde68a);
  --grad-calm: linear-gradient(160deg, #f0fdf4, #dcfce7);
  --energy-shadow: 0 14px 26px -16px rgba(255, 122, 0, .9);
  --ground-warm: #fff4e6;
  --mesh:
    radial-gradient(40rem 26rem at 100% 0, rgba(255, 210, 168, .55), transparent 70%),
    radial-gradient(32rem 24rem at 0 24%, rgba(254, 243, 199, .75), transparent 70%),
    radial-gradient(36rem 28rem at 16% 100%, rgba(220, 252, 231, .8), transparent 70%),
    #fff4e6;
  /* ── v31 token names (design/redesign-1405-06-29/tokens.css) ─────────────
     The whole v31 vocabulary, once. It used to be the second block the four
     shells carried byte for byte, because no shell loaded another's sheet; now
     every page links this sheet first, so a name declared here is a name every
     page can spend, and `test/css-tokens.test.mjs` refuses a second
     declaration of any of them in a shell.

     Values are v31's. Where production already had a name for the same job
     (--orange-soft, --orange-ink, --orange-lift, --sand, --shadow-2), the old
     name becomes an alias of the v31 one rather than a second value, so the
     two can never drift apart. Nothing here changes a pixel on its own: a
     token paints only once a rule names it. */
  --action: #b84a00;
  --action-hover: #8a3700;
  --orange-hover: #f57300;
  --orange-active: #eb6a00;
  --orange-2: #ff9f45;
  --orange-3: #ffb366;
  --orange-line: #ffd2a8;
  --ground-tint: #ffe3c4;
  --ink-strong: #111827;
  --muted-on-white: #6b7280;
  --disabled-ink: #9ca3af;
  --surface-3: #f3f4f6;
  --line-warm: #f3e4d2;
  --green-strong: #14532d;
  --green-line: #bbf7d0;
  --warn-ink: #92400e;
  --warn-strong: #78350f;
  --warn-tint: #fffbeb;
  --warn-line: #fde68a;
  --danger-strong: #991b1b;
  --danger-line: #fecaca;
  --info-ink: #1e40af;
  --info-tint: #eff6ff;
  --info-line: #bfdbfe;
  --hot-ink: #7c2d12;
  --on-dark: #ffffff;
  --on-dark-muted: #d1d5db;
  --on-dark-accent: var(--orange-3);
  --on-dark-ok: #86efac;
  --grad: var(--grad-energy);
  --grad-cta: var(--grad);
  --grad-cta-hover: var(--grad-energy-hover);
  --grad-cta-active: linear-gradient(90deg, #eb6a00, #ff9a3c);
  --grad-soft: linear-gradient(90deg, #fff4e6, #ffe0c2);
  --grad-dark: linear-gradient(145deg, #1f2937, #374151);
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-line: rgba(255, 255, 255, .8);
  --glass-filter: blur(18px) saturate(1.5);
  --glass-dark-bg: linear-gradient(145deg, rgba(31, 41, 55 , .94), rgba(55, 65, 81, .88));
  --glass-dark-line: rgba(255, 255, 255, .14);
  --radius-tag: 8px;
  --radius-tile: 12px;
  --radius-control: 14px;
  --radius-field: 18px;
  --radius-card: 22px;
  --radius-panel: 26px;
  --radius-section: 40px;
  --radius-pill: 999px;
  --sp-0-5: .125rem;
  --sp-1: .25rem;
  --sp-1-5: .375rem;
  --sp-2: .5rem;
  --sp-2-5: .625rem;
  --sp-3: .75rem;
  --sp-3-5: .875rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --shadow-lift: 0 18px 32px -24px rgba(31, 41, 55 , .5);
  --shadow-sheet: 0 -20px 40px -20px rgba(31, 41, 55 , .5);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, .95), 0 18px 40px -28px rgba(120, 72, 20, .5);
  --shadow-hero: 0 24px 44px -30px rgba(31, 41, 55 , .55);
  --shadow-float: 0 22px 40px -22px rgba(31, 41, 55 , .45);
  --shadow-cta: var(--energy-shadow);
  --shadow-cta-hover: 0 18px 30px -16px rgba(255, 122, 0, .95);
  --ring: 0 0 0 4px rgba(255, 122, 0, .16);
  --ring-select: 0 0 0 5px rgba(255, 122, 0, .12);
  --focus-ring: 3px solid var(--action);
  --dur-instant: 160ms;
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-enter: 450ms;
  --dur-sheet: 480ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --stagger: 55ms;
  --font: "Vazirmatn Variable", Vazirmatn, Tahoma, Arial, sans-serif;
  --fs-display-d: 56px; --lh-display-d: 1.4;
  --fs-h2-d: 44px; --lh-h2-d: 1.4;
  --fs-title-d: 32px; --lh-title-d: 1.5;
  --fs-display-m: 26px; --lh-display-m: 1.5;
  --fs-h1: 24px; --lh-h1: 1.5;
  --fs-h2: 20px; --lh-h2: 1.5;
  --fs-h3: 18px; --lh-h3: 1.5;
  --fs-h4: 16px; --lh-h4: 1.6;
  --fs-body: 16px; --lh-body: 1.85;
  --fs-body-lg: 15px; --lh-body-lg: 1.9;
  --fs-ui: 14px; --lh-ui: 1.85;
  --fs-input: 16px; --lh-input: 1.5;
  --fs-small: 13px; --lh-small: 1.85;
  --fs-label: 13px; --lh-label: 1.6;
  --fs-micro: 12px; --lh-micro: 1.7;
  --fs-numeric: 20px; --lh-numeric: 1.5;
  --appbar-h: 64px;
  --tabbar-h: 78px;
  --sidenav-w: 272px;
  --cp-sidenav-w: 260px;
  --cp-rail-w: 76px;
  --content-max: 1168px;
  --gutter-m: 16px;
  --gutter-t: 24px;
  --gutter-d: 48px;
  --gutter-cp: 28px;
  --hit: 44px;

  /* ── Ink, ground and surfaces ──────────────────────────────────────────── */
  --ink: #1f2937;
  --ink-2: #374151;
  --muted: #4b5563;
  /* The game's older name for --muted: an alias, never a second value. */
  --ink-3: var(--muted);
  /* The ink that prints on an orange fill (v31). Same value as --ink. */
  --cta-ink: #1f2937;
  --ground: var(--ground-warm);
  --ground-2: #fff9f2;
  --surface: #fff;
  --surface-2: #f9fafb;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --sand: var(--line-warm);

  /* ── Brand, status and their inks ─────────────────────────────────────────
     --orange and --orange-deep are fills, borders and large numerals only;
     every orange word is --action (5.9:1 on white). The same holds for green
     (--green-ink reads, --green fills) and red (--danger-ink on a tint). */
  --orange: #ff7a00;
  --orange-deep: #d95a00;
  --orange-tint: var(--energy-50);
  --orange-soft: var(--action);
  --orange-ink: var(--action-hover);
  --orange-lift: var(--orange-hover);
  --green: #16a34a;
  --green-ink: #166534;
  --green-tint: var(--calm-50);
  --danger: #b91c1c;
  --danger-ink: #991b1b;
  --danger-tint: #fef2f2;
  /* ADR-0004 entry state tokens (sign-in): border/icon ≥ 3:1, ink on fill ≥ 4.5:1. */
  --state-filled: #a86a00;
  --state-filled-fill: #fdf0cf;
  --state-locked: #d95a00;
  --state-locked-fill: #fde3d2;
  --state-done: #3d6b45;
  --state-done-fill: #e1efe2;

  /* ── Maps (v31; production had none of these) ─────────────────────────── */
  --sea: #a9daf1;
  --sea-shallow: #e4f5fc;
  --sea-label: #075985;
  --neighbor-land: #efe8de;

  /* ── Type: the landing's scale, four steps and a 12px floor ───────────────
     Steps, not a spectrum. --t-2xs is the floor the ۱۹ شهریور audit set for
     informational text. The v31 --fs-* names above are the artboards' sizes;
     these are production's, kept for the pages that already spend them. */
  --t-2xs: .75rem;
  --t-xs: .78rem;
  --t-sm: .84rem;
  --t-md: .95rem;
  --t-lg: clamp(1.05rem, 1.6vw, 1.2rem);
  --t-xl: clamp(1.35rem, 3vw, 1.9rem);
  --t-2xl: clamp(1.7rem, 4.6vw, 2.6rem);
  /* Weights as roles. Vazirmatn is variable 100–900; 800 on a 12px Persian
     label is not emphasis, it is shouting. --w-semibold is the artboards' 700
     (decision 27; production had 650 until ۱۴۰۵/۰۷/۰۱). */
  --w-regular: 450;
  --w-medium: 550;
  --w-semibold: 700;
  --w-bold: 750;

  /* ── Elevation and radius ──────────────────────────────────────────────── */
  --shadow-card: 0 10px 20px -18px rgba(31, 41, 55 , .6);
  --shadow-1: 0 10px 20px -18px rgba(31, 41, 55 , .6);
  --shadow-2: var(--shadow-lift);
  /* The landing's elevation: three stacked stops; one wide blur reads as fog. */
  --lift-1: 0 1px 2px rgba(31, 41, 55 , .05), 0 .5rem 1.2rem -.6rem rgba(31, 41, 55 , .16);
  --lift-2: 0 1px 2px rgba(31, 41, 55 , .05), 0 .9rem 2.2rem -1rem rgba(31, 41, 55 , .2), 0 2.4rem 4rem -2.4rem rgba(31, 41, 55 , .24);
  --radius: 16px;
  /* Sign-in's radius steps. */
  --r-xs: .5rem;
  --r-sm: .75rem;
  --r-md: 1rem;
  --r-lg: 1.35rem;
  --r-xl: 1.75rem;

  /* ── Motion (sign-in's older names; nothing past --dur-3) ─────────────── */
  --dur-1: 130ms;
  --dur-2: 220ms;
  --dur-3: 340ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.32, .5, 1);

  /* ── The landing's page rhythm: one vertical unit between bands ────────── */
  --band: clamp(2.25rem, 6vw, 4.5rem);
  --band-in: clamp(1.1rem, 2.6vw, 1.9rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: min(72rem, 100%);

  /* The site's arrow, drawn once and worn as a mask so it inherits the colour
     of whatever it sits in; points at the inline start (left, in RTL). */
  --i-arrow-start: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.4 12H4.6'/%3E%3Cpath d='m10.8 5.6-6.2 6.4 6.2 6.4'/%3E%3C/svg%3E");
}