/* ============================================================================
   Maia Design System v2 — token export
   Generated from Figma file RCN51Dijm1FRe7KC4DPa0I on 2026-07-25.
   Figma is the source of truth; regenerate rather than hand-editing.

   AMENDED 2026-08-01 (PRO-204) — `surface/inverse` gains a hover and an active
   step so it can carry a button fill, not just a static block. It stays a true
   inverse: ink in Light, white in Dark. A literally-black button in both modes
   would disappear on the Dark canvas, so "black button" is expressed as the
   surface that is always the opposite of the ground.

   AMENDED 2026-08-01 (PRO-204) and BACK-PORTED to Figma the same day — the
   Color collection's Dark mode now aliases the same primitives, verified
   resolving to the identical hex. In DARK, the action ramps now hold their LIGHT
   values and `text/on-accent` is white in both modes. Founder call — "purple
   button dark mode should keep white font". Dark previously used indigo/500 as
   accent/primary with INK on-accent text, because white on indigo/500 is
   3.72:1. Keeping white therefore required moving the fill, not the text: the
   ramp drops one step to indigo/600, where white is 5.10:1. Danger follows for
   the same reason (white on #E5484D is 3.4:1; on #C2181D it is 6.10:1), which
   also removes the ramp inversion Dark used to need — hover and active now
   darken in both modes.

   AMENDED 2026-07-26 with the founder's Figma colour changes, applied by hand:
   `get_variable_defs` resolves only the node's CURRENT mode, so it cannot round-
   trip a two-mode collection. Re-export properly when a full-collection export
   is available, and diff against this file. Changed: new pink/25 + six alpha
   primitives; Light state/success, state/info, accent/brand-subtle; and in Dark
   the whole indigo action ramp, border/focus, the success ramp and every
   *-subtle tint, which are now ALPHA over the canvas rather than opaque.

   WIRED INTO THE APP since PRO-204 (2026-08-01): app/app.css imports this file and
   v2 is the only system. In practice it is maintained BY HAND: it was generated
   once (2026-07-25), and every change since is an amendment noted in this header
   or beside the token. Two tokens have no counterpart in Figma's v2 « Color »
   collection: --text-on-warning, and --text-highlight (whose Light value Figma
   takes from the old v1 palette). design/IMPLEMENTATION.md §9c.

   Contrast: scripts/audit-design-v2.mts measures every text/surface pair in both
   modes on each run. The pairs below AA are listed there as RECORDED, each with
   its reason (Figma token decisions, and the landing eyebrow kept on purpose).
   ========================================================================= */

:root {
  /* --- primitives: never reference these directly in components ---------- */
  --ink-50: #f1f6fb;
  --ink-100: #e5eaef;
  --ink-200: #d2d8dd;
  --ink-300: #b5bec5;
  --ink-400: #99a4ad;
  --ink-500: #7d8a96;
  --ink-600: #63727f;
  --ink-700: #485967;
  --ink-800: #263a4a;
  --ink-900: #011627;

  --pink-25: #fff7fa;
  --pink-50: #ffecf4;
  --pink-100: #ffdae7;
  --pink-200: #ffbdd3;
  --pink-300: #ff92b7;
  --pink-400: #fe5796; /* brand seed — fills, borders, dark surfaces. 2.80:1 on canvas */
  --pink-450: #f85090; /* closest to the seed clearing 3:1 — display text ≥24px */
  --pink-500: #e53e81;
  --pink-550: #d91c73; /* closest to the seed clearing 4.5:1 — body text */
  --pink-600: #c71969;
  --pink-700: #a70050;
  --pink-800: #7e0031;
  --pink-900: #4f0012;

  --indigo-50: #f0f5ff;
  --indigo-100: #e2e9ff;
  --indigo-200: #cbd6f9;
  --indigo-300: #abbaef;
  --indigo-400: #8b9ee4;
  --indigo-500: #6b7fd7; /* seed — UI/large text and focus rings */
  --indigo-600: #5668be; /* primary action fill: white on it is 5.10:1 */
  --indigo-700: #3e4da0;
  --indigo-800: #232b7b;
  --indigo-900: #0c0053;

  --mint-25: #eafffa; /* highlight tint — light enough that all body text clears AA on it */
  --mint-50: #d8fff6;
  --mint-100: #aafdeb;
  --mint-200: #14f5d6; /* seed — decorative only, 1.39:1 */
  --mint-300: #00dcbe;
  --mint-400: #00c1a4;
  --mint-500: #00a68a;
  --mint-600: #008b72;
  --mint-700: #007058; /* the readable mint */
  --mint-800: #004d39;
  --mint-900: #002819;

  --neutral-0: #ffffff;
  --neutral-25: #f7f7fa;
  --neutral-50: #ededf2;
  --neutral-100: #e5e7e8;
  --neutral-200: #d5d9de;
  --neutral-300: #acb3bb;

  --danger-50: #fdecec;
  --danger-200: #f8a5a8;
  --danger-300: #f07478;
  --danger-400: #e5484d;
  --danger-600: #c2181d;
  --danger-700: #951114;
  --danger-800: #6e0d10;

  --warning-50: #fff3e0;
  --warning-400: #f0a020;
  --warning-600: #a35f00;
  --warning-700: #7a4600;

  --alpha-ink-4: rgba(1, 22, 39, 0.04);
  --alpha-ink-7: rgba(1, 22, 39, 0.07);
  --alpha-ink-12: rgba(1, 22, 39, 0.12);
  --alpha-ink-20: rgba(1, 22, 39, 0.2);
  --alpha-ink-32: rgba(1, 22, 39, 0.32);
  --alpha-ink-50: rgba(1, 22, 39, 0.5);
  --alpha-ink-62: rgba(1, 22, 39, 0.62);
  --alpha-ink-85: rgba(1, 22, 39, 0.85);
  --alpha-white-6: rgba(255, 255, 255, 0.06);
  --alpha-white-10: rgba(255, 255, 255, 0.1);
  --alpha-white-12: rgba(255, 255, 255, 0.12);
  --alpha-white-16: rgba(255, 255, 255, 0.16);
  --alpha-white-24: rgba(255, 255, 255, 0.24);
  --alpha-white-55: rgba(255, 255, 255, 0.55);
  --alpha-white-60: rgba(255, 255, 255, 0.6);
  --alpha-white-70: rgba(255, 255, 255, 0.7);
  --alpha-white-80: rgba(255, 255, 255, 0.8);

  /* Seed alphas — the Dark *-subtle tints are built from these rather than from
     a dark opaque step, so a tint reads as a veil over the canvas in both modes
     instead of a slab. */
  --alpha-indigo-16: rgba(107, 127, 215, 0.16);
  --alpha-mint-12: rgba(20, 245, 214, 0.12);
  --alpha-mint-16: rgba(20, 245, 214, 0.16);
  --alpha-pink-16: rgba(254, 87, 150, 0.16);
  --alpha-danger-16: rgba(229, 72, 77, 0.16);
  --alpha-warning-16: rgba(240, 160, 32, 0.16);

  /* --- scale ------------------------------------------------------------ */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 64px;

  --radius-none: 0px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --stroke-hairline: 1px;
  --stroke-thin: 1.6px;
  --stroke-thick: 2px;

  --blur-glass-sm: 16px;
  --blur-glass-md: 24px;
  --blur-glass-lg: 30px;
  --blur-glow: 180px;

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;

  /* --- typography ------------------------------------------------------- */
  --font-ui: "Urbanist", system-ui, -apple-system, sans-serif;

  /* --- semantic: LIGHT (default) ---------------------------------------- */
  --surface-canvas: #f7f7fa;
  --surface-canvas-end: #ededf2;
  --surface-raised: #ffffff;
  --surface-sunken: #ededf2;
  --surface-subtle: rgba(1, 22, 39, 0.04);
  --surface-glass: rgba(255, 255, 255, 0.55);
  --surface-glass-strong: rgba(255, 255, 255, 0.7);
  --surface-glass-input: rgba(255, 255, 255, 0.6);
  --surface-glass-panel: rgba(255, 255, 255, 0.8);
  --surface-rail: #011627;
  --surface-rail-hover: #263a4a;
  --surface-rail-active: #485967;
  /* navy-rail glass. White-alpha, NOT ink-alpha: ink-alpha darkens a dark rail.
     Hover is the lively one (pronounced glass + a sheen sweep); the persistent
     selected state is deliberately calmer. */
  --surface-rail-glass: rgba(255, 255, 255, 0.12);      /* hover */
  --surface-rail-glass-soft: rgba(255, 255, 255, 0.06); /* selected */
  --surface-inverse: #011627;
  --surface-inverse-hover: #263a4a;
  --surface-inverse-active: #485967;
  --surface-overlay: rgba(1, 22, 39, 0.5);
  --surface-highlight-subtle: #eafffa;

  --text-primary: #011627;
  --text-secondary: #485967;
  --text-muted: #63727f;
  --text-placeholder: #7d8a96;
  --text-disabled: #b5bec5;
  --text-inverse: #ffffff;
  --text-on-rail: #ffffff;
  --text-on-rail-muted: #b5bec5;
  --text-on-accent: #ffffff;
  /* Label on a FILLED state/warning surface (the brief validation gate, PRO-205
     decision #4). state/warning is #f0a020 in BOTH modes, so its label has to be
     ink in both too — white on it is 2.15:1, ink is 8.52:1. Not exported from
     Figma yet: added here so the gate could ship, needs a real variable on the
     Foundations page. */
  --text-on-warning: #011627;
  --text-brand: #d91c73;         /* body-size brand pink, 4.50:1 */
  --text-brand-display: #f85090; /* display ≥24px only, 3.00:1 — reads as the seed */
  --text-link: #5668be;

  --border-subtle: rgba(1, 22, 39, 0.07);
  --border-default: rgba(1, 22, 39, 0.12);
  --border-strong: rgba(1, 22, 39, 0.2);
  --border-glass: rgba(255, 255, 255, 0.8);
  --border-focus: #6b7fd7;
  --border-brand: #fe5796;
  --border-on-rail: rgba(255, 255, 255, 0.12);
  --border-rail-glass: rgba(255, 255, 255, 0.24);
  /* mint highlight. Vivid mint is 1.30:1 on light ground, so it can never carry
     state on its own: ALWAYS pair --border-highlight with
     --surface-highlight-subtle. The tint carries the state, the border carries
     the identity. Focus stays indigo so the two signals never collide. */
  --border-highlight: #14f5d6;

  --accent-primary: #5668be;
  --accent-primary-hover: #3e4da0;
  --accent-primary-active: #232b7b;
  --accent-primary-subtle: #f0f5ff;
  --accent-primary-text: #5668be;
  --accent-brand: #fe5796;
  --accent-brand-hover: #e53e81;
  --accent-brand-subtle: #fff7fa;

  --state-success: #007058;
  --state-success-subtle: #d8fff6;
  --state-success-text: #007058;
  /* HAND-ADDED (2026-10-19, founder): the landing eyebrow's colour as drawn in Figma 1298:593,
     bound there to `Verde_Success` (= brand/aqua) in the OLD v1 « QueDitMaia Colors » collection,
     which has one mode and no code names. 2.14:1 on canvas, kept knowingly and RECORDED in the
     audit. IMPLEMENTATION.md §9c. */
  --text-highlight: #2abfb0;
  --state-warning: #f0a020;
  --state-warning-subtle: #fff3e0;
  --state-warning-text: #a35f00;
  --state-danger: #c2181d;
  --state-danger-hover: #951114;
  --state-danger-active: #6e0d10;
  --state-danger-subtle: #fdecec;
  --state-danger-text: #c2181d;
  --state-info: #5668be;
  --state-info-subtle: #f0f5ff;

  --shadow-ambient: rgba(1, 22, 39, 0.12);
  --shadow-key: rgba(1, 22, 39, 0.2);

  /* mesh glow — conversation surface ONLY, never behind dense reading */
  --glow-pink: rgba(254, 87, 150, 0.1);
  --glow-indigo: rgba(107, 127, 215, 0.08);
  --glow-mint: rgba(20, 245, 214, 0.06);

  /* --- composed effects ------------------------------------------------- */
  --elevation-1: 0 1px 2px var(--alpha-ink-4);
  --elevation-2: 0 4px 12px var(--alpha-ink-7);
  --elevation-3: 0 10px 30px rgba(1, 22, 39, 0.1);
  --elevation-4: 0 20px 48px rgba(1, 22, 39, 0.14);
  --focus-ring: 0 0 0 3px rgba(107, 127, 215, 0.55);
  --app-gradient: linear-gradient(180deg, var(--surface-canvas), var(--surface-canvas-end));
}

/* --- semantic: DARK --------------------------------------------------------
   The action ramps (accent/primary, state/danger) hold their LIGHT values here:
   on-accent text is white in BOTH modes (founder call, 2026-08-01), and white
   only clears AA from indigo/600 and danger/600 downward. A consequence worth
   knowing: the danger ramp no longer inverts — hover and active darken in both
   modes, where Dark previously had to lighten them. */
:root[data-theme="dark"] {
  --surface-canvas: #011627;
  --surface-canvas-end: #263a4a;
  --surface-raised: #263a4a;
  --surface-sunken: #011627;
  --surface-subtle: rgba(255, 255, 255, 0.06);
  --surface-glass: rgba(255, 255, 255, 0.06);
  --surface-glass-strong: rgba(255, 255, 255, 0.1);
  --surface-glass-input: rgba(255, 255, 255, 0.1);
  --surface-glass-panel: rgba(255, 255, 255, 0.12);
  --surface-rail: #011627;
  --surface-rail-hover: #263a4a;
  --surface-rail-active: #485967;
  --surface-rail-glass: rgba(255, 255, 255, 0.12);
  --surface-rail-glass-soft: rgba(255, 255, 255, 0.06);
  /* The inverse ramp DARKENS in Dark instead of lightening: the resting step is
     already white, so there is nowhere brighter to go. */
  --surface-inverse: #ffffff;
  --surface-inverse-hover: #f1f6fb;
  --surface-inverse-active: #e5eaef;
  --surface-overlay: rgba(1, 22, 39, 0.62);
  --surface-highlight-subtle: rgba(20, 245, 214, 0.12);

  --text-primary: #f7f7fa;
  --text-secondary: #d2d8dd;
  --text-muted: #99a4ad;
  --text-placeholder: #7d8a96;
  --text-disabled: #63727f;
  --text-inverse: #011627;
  --text-on-rail: #ffffff;
  --text-on-rail-muted: #b5bec5;
  --text-on-accent: #ffffff;
  /* Holds its Light value: state/warning does not invert, so neither can its label. */
  --text-on-warning: #011627;
  --text-brand: #ff92b7;         /* body pink; holds on dark raised surfaces too */
  --text-brand-display: #fe5796; /* the seed itself — 6.13:1 on dark canvas */
  --text-link: #abbaef;

  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-glass: rgba(255, 255, 255, 0.12);
  --border-focus: #6b7fd7;
  --border-brand: #fe5796;
  --border-on-rail: rgba(255, 255, 255, 0.12);
  --border-rail-glass: rgba(255, 255, 255, 0.24);
  --border-highlight: #14f5d6;

  --accent-primary: #5668be;
  --accent-primary-hover: #3e4da0;
  --accent-primary-active: #232b7b;
  --accent-primary-subtle: rgba(107, 127, 215, 0.16);
  --accent-primary-text: #abbaef;
  --accent-brand: #fe5796;
  --accent-brand-hover: #ff92b7;
  --accent-brand-subtle: rgba(254, 87, 150, 0.16);

  --state-success: #14f5d6;
  --state-success-subtle: rgba(20, 245, 214, 0.16);
  --state-success-text: #00dcbe;
  /* HAND-ADDED (2026-10-19): the v1 collection has no Dark value; the bright mint, as
     state/success-text. §9c. */
  --text-highlight: #00dcbe;
  --state-warning: #f0a020;
  --state-warning-subtle: rgba(240, 160, 32, 0.16);
  --state-warning-text: #f0a020;
  --state-danger: #c2181d;
  --state-danger-hover: #951114;
  --state-danger-active: #6e0d10;
  --state-danger-subtle: rgba(229, 72, 77, 0.16);
  --state-danger-text: #f8a5a8;
  --state-info: #6b7fd7;
  --state-info-subtle: rgba(107, 127, 215, 0.16);

  --shadow-ambient: rgba(1, 22, 39, 0.5);
  --shadow-key: rgba(1, 22, 39, 0.62);

  --glow-pink: rgba(254, 87, 150, 0.14);
  --glow-indigo: rgba(107, 127, 215, 0.12);
  --glow-mint: rgba(20, 245, 214, 0.1);
}