/* ════════════════════════════════════════════════════════════════════════
   Tokens. Copied from the main site (web/src/styles/base/vars-*.scss and
   variables.scss) on 2026-10-24, because an experiment inherits nothing.
   Only the steps this page uses are copied. Nothing here syncs back, so a
   change on the site does not reach this page.

   Two departures from the site:
   - Fonts: Mona Sans from Google Fonts, for everything. It stands in for
     At Haüss; the site's serif (At Gambit) is not used here.
   - The ground is pure white, not the site's #fcfcfc. There is one theme,
     light, whatever the system setting.
   - The actions are mint with dark green text, not the site's rose, and the
     panels are sand, not slate: this is a fashion house's tool, red here
     means only "no" and green means go (Kayhan's call, 2026-10-26).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Raw scales (site values) ── */
  --white: #fcfcfc;
  --black: #09090b;

  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CAD5E2;
  --gray-400: #90A1B9;
  --gray-500: #62748E;
  --gray-600: #45556C;
  --gray-700: #314158;
  --gray-800: #1D293D;

  --rose-300: #fda4af;
  --rose-400: #fb7185;
  --rose-700: #be123c;
  --rose-800: #9f1239;

  --teal-50: #eafff8;
  --teal-300: #63f2cd;
  --teal-800: #006759;
  --teal-950: #00302b;

  /* The site's reserve orange, given its first job here: the Blocked state. */
  --highlight-100: #FFE5D9;
  --highlight-500: #ff4500;
  --highlight-700: #C43400;

  /* This page's own: warm tones that sit with the photographs. */
  /* Kayhan's mint scale, lightest to darkest. Against white: 100–500 are under
     3:1, so they are fills only; 600 (4.0:1) takes marks; 700–800 take text. */
  --mint-100: #adebb3;
  --mint-200: #89e291;
  --mint-300: #64d96f;
  --mint-400: #40d04e;
  --mint-500: #2cb63a;
  --mint-600: #24922e;
  --mint-700: #1b6d23;
  --mint-800: #124917;
  --sand-50: #f8f5f0;
  --sand-100: #f3efe9;

  --white-alpha-10: rgba(255, 255, 255, 0.1);
  --white-alpha-20: rgba(255, 255, 255, 0.2);

  /* ── Type (site values; families swapped, see above) ── */
  --sans: 'Mona Sans', system-ui, sans-serif;
  --h1: clamp(2rem, 1.3627rem + 2.6144vw, 4.5rem);
  --h4: clamp(1.375rem, 0.897rem + 1.9608vw, 3.25rem);
  --h6: clamp(1rem, 0.6814rem + 1.3072vw, 2.25rem);
  --p-lg: clamp(1rem, 0.8725rem + 0.5229vw, 1.5rem);
  --p: clamp(0.875rem, 0.7794rem + 0.3922vw, 1.25rem);
  --p-sm: clamp(0.875rem, 0.8431rem + 0.1307vw, 1rem);
  --lh-s: 1.1em;
  --lh-m: 1.2em;
  --lh-l: 1.4em;
  --lh-xl: 1.6em;

  /* ── Space and radius (site values) ── */
  --space-4: clamp(0.125rem, 0.0931rem + 0.1307vw, 0.25rem);
  --space-8: clamp(0.25rem, 0.1863rem + 0.2614vw, 0.5rem);
  --space-12: clamp(0.5rem, 0.4363rem + 0.2614vw, 0.75rem);
  --space-16: clamp(0.5rem, 0.3725rem + 0.5229vw, 1rem);
  --space-24: clamp(0.75rem, 0.5588rem + 0.7843vw, 1.5rem);
  --space-32: clamp(1rem, 0.7451rem + 1.0458vw, 2rem);
  --space-48: clamp(1.5rem, 1.1176rem + 1.5686vw, 3rem);
  --space-64: clamp(2rem, 1.4902rem + 2.0915vw, 4rem);
  --space-120: clamp(5rem, 4.3627rem + 2.6144vw, 7.5rem);
  --radius-4: clamp(0.125rem, 0.0931rem + 0.1307vw, 0.25rem);
  --radius-full: 62rem;

  /* ── Motion. The site's tokens run 0.2–0.7s; this page uses 400ms. ── */
  --dur: 400ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Finishing moments run longer and land with a small settle. */
  --dur-long: 700ms;
  --ease-settle: cubic-bezier(0.2, 1.25, 0.35, 1);

  /* ── Semantic, light (site mapping where one exists) ── */
  --ground: #ffffff;                   /* site --surface-primary is #fcfcfc */
  --panel: var(--sand-50);
  --panel-2: var(--sand-100);
  --ink: var(--black);                 /* site --text-primary */
  --ink-2: var(--gray-800);            /* site --text-tertiary */
  --muted: var(--gray-600);            /* site --text-muted */
  --rule: var(--gray-200);             /* hairlines, decorative */
  --line: var(--gray-500);             /* control edges, needs 3:1 */
  --accent: var(--mint-100);           /* the main button's fill; the site's is rose */
  --accent-strong: var(--mint-200);    /* its hover */
  --on-accent: var(--mint-800);        /* 7.7:1 on mint-100, 6.7:1 on mint-200 */
  --accent-ink: var(--mint-700);       /* accent as text or a line on white, 6.5:1 */
  --accent-mark: var(--mint-600);      /* accent as a small mark on white, 4.0:1 */
  --focus: var(--mint-800);            /* 10.6:1 on white, 9.7:1 on sand, 7.7:1 on mint */
  --no: var(--rose-700);               /* the title's "No" and its disclaimer dot, nothing else */

  --block-ink: var(--highlight-700);
  --block-soft: var(--highlight-100);
  --fail-ink: var(--gray-600);
  --fail-soft: var(--gray-100);
  --ok-ink: var(--teal-800);           /* site --text-brand */
  --ok-soft: var(--teal-50);

  /* The design notes and their button: inverted, so they never read as part of the simulated app. */
  --demo-bg: var(--black);
  --demo-ink: var(--white);
  --demo-muted: var(--gray-400);
  --demo-hover: var(--white-alpha-10);

  color-scheme: light;
}