/* Kai Flow web — tokens.
 *
 * The only file in this repository allowed to hold a colour value
 * (scripts/check.mjs fails on a hex anywhere else). Everything else reads
 * these names.
 *
 * This is Kai Flow's own surface, not a shop's: the Kai layer only (KDL rule
 * 0). Indigo and ink are the Master Brand Pack's; there is no tenant colour on
 * this site and there must never be one.
 *
 * Spacing, radius and the body type steps are the dashboard's, copied by name
 * (MDS part five: take the tokens, not the colours). Two steps are new and
 * exist only here — --font-hero and --font-section — because a landing page
 * has one job the dashboard never has: a headline read from across a room.
 */

:root {
  --kai-primary: #5B5BD6;
  --kai-primary-strong: #4646C2;
  --kai-ink: #141426;
  --on-kai: #FFFFFF;

  --surface-base: #FAF9F6;
  --surface-raised: #FFFFFF;
  --surface-sunk: #F1F0EB;
  --surface-ink: #141426;
  --kai-tint: rgba(91, 91, 214, 0.08);
  --kai-text: #4646C2;

  --text-primary: #141426;
  --text-secondary: rgba(20, 20, 38, 0.74);
  --text-tertiary: rgba(20, 20, 38, 0.58);
  --text-on-ink: #FFFFFF;
  --text-on-ink-secondary: rgba(255, 255, 255, 0.68);
  --border-subtle: rgba(20, 20, 38, 0.10);
  --border-strong: rgba(20, 20, 38, 0.18);

  --status-positive: #15803D;
  --status-positive-bg: rgba(21, 128, 61, 0.10);
  --status-negative: #B91C1C;
  --status-negative-bg: rgba(185, 28, 28, 0.08);
  --status-warning: #A16207;
  --status-warning-bg: rgba(161, 98, 7, 0.10);

  --elev-1: 0 1px 2px rgba(20, 20, 38, 0.06), 0 1px 1px rgba(20, 20, 38, 0.04);
  --elev-2: 0 8px 24px rgba(20, 20, 38, 0.08), 0 2px 6px rgba(20, 20, 38, 0.05);
  --elev-3: 0 24px 60px rgba(20, 20, 38, 0.14), 0 6px 16px rgba(20, 20, 38, 0.06);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-input: 12px;
  --radius-button: 12px;
  --radius-card: 16px;
  --radius-modal: 24px;
  --radius-full: 999px;

  --font-hero: clamp(36px, 6.2vw, 62px);
  --font-section: clamp(28px, 3.8vw, 42px);
  --font-display-large: 32px;
  --font-display-medium: 20px;
  --font-display-small: 18px;
  --font-body-large: 16px;
  --font-body-medium: 14px;
  --font-body-small: 12px;
  --font-label-large: 14px;
  --font-label-medium: 12px;
  --font-label-small: 10px;

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1120px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* --kai-primary stays as it is: white on it is 5.4:1, and a lighter
       indigo for dark mode fell to 4.4 — under AA for a button label. Text
       that is indigo on a dark ground uses --kai-text instead. */
    --kai-primary-strong: #4C4CCB;
    --surface-base: #0D0D18;
    --surface-raised: #171728;
    --surface-sunk: #0A0A13;
    --surface-ink: #050509;
    --kai-tint: rgba(132, 132, 234, 0.12);
    --kai-text: #A9A9F5;
    --text-primary: #F4F4F8;
    --text-secondary: rgba(244, 244, 248, 0.74);
    --text-tertiary: rgba(244, 244, 248, 0.58);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --status-positive: #4ADE80;
    --status-positive-bg: rgba(74, 222, 128, 0.12);
    --status-negative: #F87171;
    --status-negative-bg: rgba(248, 113, 113, 0.12);
    --status-warning: #FBBF24;
    --status-warning-bg: rgba(251, 191, 36, 0.12);
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --elev-2: 0 8px 24px rgba(0, 0, 0, 0.45);
    --elev-3: 0 24px 60px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}