/* ==========================================================================
   AI PLAYGROUND — DESIGN TOKENS
   --------------------------------------------------------------------------
   Colour ramps, type scale and rhythm derived from the 2022 brand system
   reference. Ten hues x ten steps, a pentatonic type scale (size doubles
   every five steps from a 12px base), and a spacing scale on the same ratio.

   Nothing below is a component. Anything that is a raw value lives here and
   only here.
   ========================================================================== */

:root {
  /* --- Ramp: gray ------------------------------------------------------ */
  --gray-000: #FFFFFF;
  --gray-100: #FAFAFA;
  --gray-200: #F5F5F5;
  --gray-300: #E5E5E5;
  --gray-400: #DADADA;
  --gray-500: #CDCDCD;
  --gray-600: #A8A8A8;
  --gray-700: #747474;
  --gray-800: #393939;
  --gray-900: #000000;

  /* --- Ramp: red (secondary) ------------------------------------------- */
  --red-050: #FFF7F6;
  --red-100: #FFEDEB;
  --red-200: #FFE0DB;
  --red-300: #FFD3C9;
  --red-400: #FFB7A4;
  --red-500: #FF9574;
  --red-600: #FF6E3C;
  --red-700: #FF4500;
  --red-800: #AA2E00;
  --red-900: #541600;

  /* --- Ramp: green (secondary) ----------------------------------------- */
  --green-050: #F4FFF4;
  --green-100: #E9FFE8;
  --green-200: #D9FFD8;
  --green-300: #C9FFC7;
  --green-400: #A6FFA3;
  --green-500: #7CF178;
  --green-600: #51DA4C;
  --green-700: #3FA93B;
  --green-800: #2D712A;
  --green-900: #193718;

  /* --- Ramp: blue (secondary) ------------------------------------------ */
  --blue-050: #F4FBFF;
  --blue-100: #E5F1FF;
  --blue-200: #CBDCFF;
  --blue-300: #AFC1FF;
  --blue-400: #7989FF;
  --blue-500: #3C46FF;
  --blue-600: #0000FF;
  --blue-700: #0404AC;
  --blue-800: #020267;
  --blue-900: #00002E;

  /* --- Ramp: yellow (tertiary) ----------------------------------------- */
  --yellow-050: #FFFFDB;
  --yellow-100: #FFFFB6;
  --yellow-200: #FFFF8F;
  --yellow-300: #FFFF66;
  --yellow-400: #FFF639;
  --yellow-500: #F5E60D;
  --yellow-600: #CFC52C;
  --yellow-700: #A19A3A;
  --yellow-800: #6C6837;
  --yellow-900: #343322;

  /* --- Ramp: magenta (tertiary) ---------------------------------------- */
  --magenta-050: #FFF9FF;
  --magenta-100: #FFF2FF;
  --magenta-200: #FFD7FF;
  --magenta-300: #FFC1FF;
  --magenta-400: #FF8BFF;
  --magenta-500: #FF45FF;
  --magenta-600: #FF00FF;
  --magenta-700: #C500C5;
  --magenta-800: #830083;
  --magenta-900: #400040;

  /* --- Ramp: cyan (tertiary) ------------------------------------------- */
  --cyan-050: #F0FFFF;
  --cyan-100: #E0FFFF;
  --cyan-200: #CAFFFF;
  --cyan-300: #B3FFFF;
  --cyan-400: #82FFFF;
  --cyan-500: #42FFFF;
  --cyan-600: #00FFFF;
  --cyan-700: #00E7E7;
  --cyan-800: #00B3B3;
  --cyan-900: #005454;

  /* --- Ramp: orange (supplemental) ------------------------------------- */
  --orange-050: #FFFCF5;
  --orange-100: #FFF9EA;
  --orange-200: #FFF1D6;
  --orange-300: #FFE8C1;
  --orange-400: #FFC98A;
  --orange-500: #FFA045;
  --orange-600: #FE7600;
  --orange-700: #C45600;
  --orange-800: #833600;
  --orange-900: #401900;

  /* --- Ramp: violet (supplemental) ------------------------------------- */
  --violet-050: #FFF9FF;
  --violet-100: #FFF2FF;
  --violet-200: #FEE6FF;
  --violet-300: #FCDAFF;
  --violet-400: #EBBBFF;
  --violet-500: #D292FF;
  --violet-600: #B161FD;
  --violet-700: #8A2BE2;
  --violet-800: #571397;
  --violet-900: #28044A;

  /* --- Ramp: brown (supplemental) -------------------------------------- */
  --brown-050: #F7ECE6;
  --brown-100: #F0DACF;
  --brown-200: #E8C7B6;
  --brown-300: #E1B59F;
  --brown-400: #CB9379;
  --brown-500: #B67252;
  --brown-600: #A0522D;
  --brown-700: #793A1C;
  --brown-800: #51230D;
  --brown-900: #2A1003;

  /* ======================================================================
     TYPOGRAPHY
     Pentatonic scale: a(n) = 12 x 2^((n-1)/5). Size doubles every 5 steps.
     ====================================================================== */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
                  "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
               Consolas, monospace;

  --t-9:   0.5625rem;  /*  9px */
  --t-10:  0.625rem;   /* 10px */
  --t-11:  0.6875rem;  /* 11px */
  --t-12:  0.75rem;    /* 12px */
  --t-14:  0.875rem;   /* 14px */
  --t-16:  1rem;       /* 16px */
  --t-18:  1.125rem;   /* 18px */
  --t-21:  1.3125rem;  /* 21px */
  --t-24:  1.5rem;     /* 24px */
  --t-28:  1.75rem;    /* 28px */
  --t-32:  2rem;       /* 32px */
  --t-36:  2.25rem;    /* 36px */
  --t-42:  2.625rem;   /* 42px */
  --t-48:  3rem;       /* 48px */
  --t-55:  3.4375rem;  /* 55px */
  --t-64:  4rem;       /* 64px */
  --t-73:  4.5625rem;  /* 73px */
  --t-84:  5.25rem;    /* 84px */
  --t-96:  6rem;       /* 96px */

  /* Fluid display sizes — the oversized editorial headlines */
  --t-display-1: clamp(2.75rem, 9vw, 8.5rem);
  --t-display-2: clamp(2.25rem, 6.5vw, 5.25rem);
  --t-display-3: clamp(1.875rem, 4.4vw, 3.4375rem);
  --t-display-4: clamp(1.5rem, 3vw, 2.25rem);

  /* Line heights, per the reference: 100% display, 110–120% mid, 130% sans
     body, 140% serif body */
  --lh-display: 0.94;
  --lh-tight: 1.1;
  --lh-mid: 1.2;
  --lh-body: 1.3;
  --lh-prose: 1.5;
  --lh-serif: 1.4;

  /* Tracking: -2% at large sizes, -1% mid, 0 small, positive for labels */
  --tr-display: -0.03em;
  --tr-tight: -0.02em;
  --tr-mid: -0.01em;
  --tr-none: 0;
  --tr-label: 0.08em;
  --tr-caps: 0.12em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ======================================================================
     SPACE — same 2^(1/5) ratio, rounded to a 4px rhythm
     ====================================================================== */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;
  --sp-13: 10rem;

  --section-y: clamp(4rem, 9vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 34rem;         /* optimal prose width */
  --measure-narrow: 26rem;
  --max-w: 96rem;

  /* ======================================================================
     BORDERS, RADII, ELEVATION
     Restrained: hairline rules, minimal rounding, almost no shadow.
     ====================================================================== */
  --rule: 1px;
  --rule-thick: 2px;
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ======================================================================
     MOTION
     ====================================================================== */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --dur-5: 800ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ==========================================================================
   SEMANTIC LAYER — LIGHT THEME (primary presentation)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --ink: var(--gray-900);
  --ink-secondary: #4A4A4A;
  --ink-muted: #6E6E6E;
  --ink-faint: var(--gray-700);
  --ink-inverse: var(--gray-000);

  --paper: #FFFFFF;
  --paper-warm: #F7F6F3;   /* off-white, for alternating sections */
  --paper-sunk: var(--gray-200);
  --paper-raised: #FFFFFF;
  --paper-inverse: var(--gray-900);

  --line: var(--gray-300);
  --line-strong: var(--gray-500);
  --line-ink: var(--gray-900);

  --field: #FFFFFF;
  --field-line: var(--gray-400);

  --focus: var(--blue-600);
  --selection-bg: var(--blue-600);
  --selection-fg: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.10);
  --scrim: rgba(0, 0, 0, 0.45);

  /* Default accent when no hue is set on an ancestor */
  --accent: var(--blue-600);
  --accent-ink: var(--blue-600);
  --accent-wash: var(--blue-100);
  --accent-line: var(--blue-300);
  --accent-on: #FFFFFF;
}

/* ==========================================================================
   SEMANTIC LAYER — DARK THEME
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --ink: #F2F2F0;
  --ink-secondary: #C4C4C2;
  --ink-muted: #9A9A98;
  --ink-faint: #85857F;   /* lifted to clear 4.5:1 on --paper */
  --ink-inverse: #0A0A0A;

  --paper: #0A0A0A;
  --paper-warm: #121211;
  --paper-sunk: #171716;
  --paper-raised: #161615;
  --paper-inverse: #F2F2F0;

  --line: #2A2A28;
  --line-strong: #3D3D3A;
  --line-ink: #F2F2F0;

  --field: #131312;
  --field-line: #33332F;

  --focus: var(--blue-400);
  --selection-bg: var(--blue-500);
  --selection-fg: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 0, 0.7);

  --accent: var(--blue-500);
  --accent-ink: var(--blue-400);
  --accent-wash: var(--blue-900);
  --accent-line: var(--blue-800);
  --accent-on: #FFFFFF;
}

/* ==========================================================================
   HUE THEMES
   --------------------------------------------------------------------------
   Set data-hue on any element to retheme its subtree. Two accent tokens are
   deliberately separate:
     --accent      display / fill / rules  (saturated, may fail text contrast)
     --accent-ink  text and icons          (always >= 4.5:1 on --paper)
   ========================================================================== */
[data-hue="blue"] {
  --accent: var(--blue-600); --accent-ink: var(--blue-600);
  --accent-wash: var(--blue-100); --accent-line: var(--blue-300);
  --accent-on: #FFFFFF;
}
/* Red and magenta take black on their fill, not white: white fails WCAG AA at
   body sizes on both, and the source system pairs its saturated mid-tones
   with gray-900 for exactly this reason. */
[data-hue="red"] {
  --accent: var(--red-700); --accent-ink: var(--red-800);
  --accent-wash: var(--red-100); --accent-line: var(--red-300);
  --accent-on: var(--gray-900);
}
[data-hue="green"] {
  --accent: var(--green-600); --accent-ink: var(--green-800);
  --accent-wash: var(--green-100); --accent-line: var(--green-300);
  --accent-on: var(--gray-900);
}
[data-hue="violet"] {
  --accent: var(--violet-700); --accent-ink: var(--violet-800);
  --accent-wash: var(--violet-200); --accent-line: var(--violet-400);
  --accent-on: #FFFFFF;
}
[data-hue="orange"] {
  --accent: var(--orange-600); --accent-ink: var(--orange-800);
  --accent-wash: var(--orange-200); --accent-line: var(--orange-400);
  --accent-on: var(--gray-900);
}
[data-hue="cyan"] {
  --accent: var(--cyan-700); --accent-ink: var(--cyan-900);
  --accent-wash: var(--cyan-100); --accent-line: var(--cyan-300);
  --accent-on: var(--gray-900);
}
[data-hue="magenta"] {
  --accent: var(--magenta-600); --accent-ink: var(--magenta-800);
  --accent-wash: var(--magenta-100); --accent-line: var(--magenta-300);
  --accent-on: var(--gray-900);
}
[data-hue="yellow"] {
  --accent: var(--yellow-400); --accent-ink: var(--yellow-900);
  --accent-wash: var(--yellow-100); --accent-line: var(--yellow-300);
  --accent-on: var(--gray-900);
}
[data-hue="brown"] {
  --accent: var(--brown-600); --accent-ink: var(--brown-800);
  --accent-wash: var(--brown-100); --accent-line: var(--brown-300);
  --accent-on: #FFFFFF;
}
[data-hue="gray"] {
  --accent: var(--gray-800); --accent-ink: var(--gray-900);
  --accent-wash: var(--gray-200); --accent-line: var(--gray-400);
  --accent-on: #FFFFFF;
}

/* Dark theme rebalances every hue: fills brighten, ink lifts to a light
   tint, washes drop to the 900 step. */
[data-theme="dark"] [data-hue="blue"] {
  --accent: var(--blue-500); --accent-ink: var(--blue-400);
  --accent-wash: #0B0B33; --accent-line: var(--blue-800);
}
[data-theme="dark"] [data-hue="red"] {
  --accent: var(--red-700); --accent-ink: var(--red-500);
  --accent-wash: #2C0B00; --accent-line: var(--red-900);
}
[data-theme="dark"] [data-hue="green"] {
  --accent: var(--green-600); --accent-ink: var(--green-500);
  --accent-wash: #0E1F0D; --accent-line: var(--green-900);
}
[data-theme="dark"] [data-hue="violet"] {
  --accent: var(--violet-600); --accent-ink: var(--violet-500);
  --accent-wash: #190330; --accent-line: var(--violet-900);
}
[data-theme="dark"] [data-hue="orange"] {
  --accent: var(--orange-600); --accent-ink: var(--orange-500);
  --accent-wash: #241000; --accent-line: var(--orange-900);
}
[data-theme="dark"] [data-hue="cyan"] {
  --accent: var(--cyan-700); --accent-ink: var(--cyan-500);
  --accent-wash: #002E2E; --accent-line: var(--cyan-900);
}
[data-theme="dark"] [data-hue="magenta"] {
  --accent: var(--magenta-600); --accent-ink: var(--magenta-400);
  --accent-wash: #250025; --accent-line: var(--magenta-900);
}
[data-theme="dark"] [data-hue="yellow"] {
  --accent: var(--yellow-400); --accent-ink: var(--yellow-400);
  --accent-wash: #1E1D13; --accent-line: var(--yellow-900);
}
[data-theme="dark"] [data-hue="brown"] {
  --accent: var(--brown-600); --accent-ink: var(--brown-400);
  --accent-wash: #1A0A02; --accent-line: var(--brown-900);
}
[data-theme="dark"] [data-hue="gray"] {
  --accent: var(--gray-500); --accent-ink: var(--gray-000);
  --accent-wash: #1C1C1A; --accent-line: var(--gray-800);
}

/* ==========================================================================
   FLAT COLOUR BLOCKS
   Full-bleed saturated panels, per the reference's product-header treatment.
   Foreground is chosen per hue to hold contrast on the flat fill.
   ========================================================================== */
.block-fill {
  background: var(--accent);
  color: var(--accent-on);
}
.block-fill[data-hue="green"],
.block-fill[data-hue="yellow"],
.block-fill[data-hue="cyan"],
.block-fill[data-hue="red"],
.block-fill[data-hue="magenta"],
.block-fill[data-hue="orange"] { color: var(--gray-900); }

.block-wash {
  background: var(--accent-wash);
  color: var(--ink);
}