/*
 * K1 (Kota One) — web/styles/tokens.css
 *
 * THIS FILE IS THE RUNTIME CANON for color, radius, density, type, and motion
 * tokens (Pulse 343 F24.1 / F7). Edit it directly. docs/design/redesign/* is
 * ARCHIVE, not canon — do NOT re-copy from it (it diverged behind this file).
 *
 * Per F8 (NO RAW COLOR OUTSIDE TOKENS.CSS), raw color literals are
 * AUTHORITATIVE here and forbidden everywhere else. Reference for the full
 * system: /test/UIstandards.html.
 */

/* ============================================================
   K1 — Theme tokens
   Five skins, all driven by the same variable contract.
   ============================================================ */

:root {
  /* Type */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ────────────────────────────────────────────────────────────
     Density (Pulse #174) — Comfortable is the default. Compact
     and Spacious are visibly different steps, not 1-px nudges.
     Every canonical page MUST size text via the --fs-* scale
     below; new code that hardcodes `font-size: 14px` (etc.)
     defeats this whole system. See F23.
     ──────────────────────────────────────────────────────────── */

  /* Spacing scale (--pad-0 = micro tier for 2-4px nudges/gaps, Pulse 343 P1) */
  --pad-0: 4px;
  --pad-1: 5px;
  --pad-2: 10px;
  --pad-3: 14px;
  --pad-4: 20px;
  --pad-5: 26px;
  --pad-6: 32px;
  --row-h: 44px;
  --cell-py: 12px;
  --cell-px: 16px;
  --topbar-h: 56px;

  /* Type scale (per density). Six steps cover everything from
     captions/badges (--fs-xs) up to large hero text (--fs-xl).
     Body / default text is --fs-base. --base-fs stays as an
     alias for backwards compat with html/body in app.css. */
  --fs-2xs:   10px;  /* micro-labels, tile sub-labels (Pulse 343 P1) */
  --fs-xs:    12px;  /* captions, badges, footnotes */
  --fs-sm:    14px;  /* labels, secondary metadata */
  --fs-base:  16px;  /* body text, paragraphs */
  --fs-md:    18px;  /* small headings, section titles */
  --fs-lg:    22px;  /* page headings */
  --fs-xl:    28px;  /* large hero text (rare) */
  --base-fs:  var(--fs-base);

  /* Control heights (per density). Components size via these so Compact and
     Spacious resize hit targets, not just text (#343 a11y/density fix). */
  --ctl-h:    32px;  /* btn / input / select default height */
  --ctl-h-sm: 26px;  /* btn-sm and other compact controls */
  --badge-h:  22px;  /* badge / chip pill height */

  /* Motion */
  --t-fast: .12s ease;
  --t-med: .18s ease;

  /* Modal/overlay scrim — theme-invariant; black overlay works across all skins */
  --scrim: rgba(0,0,0,.45);

  /* ────────────────────────────────────────────────────────────
     Foundation primitives (#343). Previously faked per-module —
     now canonical so popovers/menus, focus rings, and pill shapes
     are consistent and skin-aware.
     ──────────────────────────────────────────────────────────── */

  /* Focus ring — skin-aware (derives from --accent). Components apply this
     via :focus-visible so keyboard users get a visible ring, mouse users
     don't. NEVER hand-roll a focus outline; use these. */
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--accent) 45%, transparent);
  --focus-ring-offset: 2px;

  /* Recommended minimum hit target for touch-first contexts (WCAG 2.5.5).
     Desktop Compact density may go smaller for mouse use. */
  --touch-target: 32px;

  /* Pill radius — for fully-rounded chips/badges/toggles. */
  --r-pill: 999px;

  /* Z-index scale — codifies the existing layering so new overlays stop
     inventing magic numbers. base < sticky(topbar) < dropdown(popover/menu)
     < overlay(scrim) < modal(slide/dialog) < toast. */
  --z-base: 1;
  --z-sticky: 50;
  --z-dropdown: 60;
  --z-overlay: 200;
  --z-modal: 250;
  --z-toast: 400;
}

[data-density="compact"] {
  --pad-0: 2px;
  --pad-1: 3px;
  --pad-2: 6px;
  --pad-3: 10px;
  --pad-4: 14px;
  --pad-5: 18px;
  --pad-6: 22px;
  --row-h: 34px;
  --cell-py: 7px;
  --cell-px: 11px;
  --topbar-h: 48px;
  --ctl-h: 28px;
  --ctl-h-sm: 23px;
  --badge-h: 19px;

  --fs-2xs:   9px;
  --fs-xs:    10px;
  --fs-sm:    12px;
  --fs-base:  13px;
  --fs-md:    15px;
  --fs-lg:    18px;
  --fs-xl:    22px;
}

[data-density="spacious"] {
  --pad-0: 5px;
  --pad-1: 6px;
  --pad-2: 12px;
  --pad-3: 18px;
  --pad-4: 26px;
  --pad-5: 34px;
  --pad-6: 44px;
  --row-h: 56px;
  --cell-py: 18px;
  --cell-px: 22px;
  --topbar-h: 68px;
  --ctl-h: 38px;
  --ctl-h-sm: 31px;
  --badge-h: 26px;

  --fs-2xs:   12px;
  --fs-xs:    14px;
  --fs-sm:    16px;
  --fs-base:  19px;
  --fs-md:    22px;
  --fs-lg:    27px;
  --fs-xl:    34px;
}

/* ============================================================
   SKIN: Daylight (default light) — warm-neutral, sage accent
   ============================================================ */
[data-skin="daylight"] {
  --bg:        #fafaf7;
  --surface:   #ffffff;
  --surface-2: #f4f4f0;
  --surface-3: #ecece6;
  --hover:     #f0f0ea;
  --border:    #e4e3dc;
  --border-2:  #d4d3ca;
  --divider:   #ececec;

  --text:      #1a1a17;
  --text-2:    #5a5a52;
  --text-3:    #8a8a80;
  --text-4:    #b8b8ac;

  --accent:    oklch(0.55 0.10 155);
  --accent-2:  oklch(0.62 0.11 155);
  --accent-3:  oklch(0.96 0.02 155);
  --on-accent: #ffffff;
  --on-danger: #ffffff;

  --success:   oklch(0.58 0.13 155);
  --warning:   oklch(0.72 0.14 75);
  --danger:    oklch(0.58 0.18 25);
  --info:      oklch(0.60 0.13 245);
  --purple:    oklch(0.58 0.15 295);

  --success-bg: oklch(0.96 0.03 155);
  --warning-bg: oklch(0.96 0.04 75);
  --danger-bg:  oklch(0.96 0.03 25);
  --info-bg:    oklch(0.96 0.03 245);
  --purple-bg:  oklch(0.96 0.03 295);

  --shadow-sm: 0 1px 2px rgba(20,20,15,.05), 0 1px 1px rgba(20,20,15,.04);
  --shadow-md: 0 4px 12px rgba(20,20,15,.06), 0 2px 4px rgba(20,20,15,.04);
  --shadow-lg: 0 12px 32px rgba(20,20,15,.10), 0 4px 8px rgba(20,20,15,.05);

  --code-bg:   #f4f4f0;
  --code-fg:   #5a5a52;

  color-scheme: light;
}

/* ============================================================
   SKIN: Midnight — deep navy dark, sage accent
   ============================================================ */
[data-skin="midnight"] {
  --bg:        #0b0f17;
  --surface:   #11151f;
  --surface-2: #161b27;
  --surface-3: #1d2330;
  --hover:     #1a2030;
  --border:    #232a38;
  --border-2:  #2e3645;
  --divider:   #1a2030;

  --text:      #e6eaf2;
  --text-2:    #9aa3b5;
  --text-3:    #6a7388;
  --text-4:    #444c5e;

  --accent:    oklch(0.78 0.14 155);
  --accent-2:  oklch(0.85 0.13 155);
  --accent-3:  oklch(0.30 0.07 155);
  --on-accent: #0b0f17;
  --on-danger: #ffffff;

  --success:   oklch(0.78 0.14 155);
  --warning:   oklch(0.80 0.15 75);
  --danger:    oklch(0.72 0.18 25);
  --info:      oklch(0.75 0.13 245);
  --purple:    oklch(0.75 0.15 295);

  --success-bg: color-mix(in oklch, var(--success) 12%, transparent);
  --warning-bg: color-mix(in oklch, var(--warning) 12%, transparent);
  --danger-bg:  color-mix(in oklch, var(--danger) 14%, transparent);
  --info-bg:    color-mix(in oklch, var(--info) 12%, transparent);
  --purple-bg:  color-mix(in oklch, var(--purple) 12%, transparent);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.6);

  --code-bg:   #161b27;
  --code-fg:   #9aa3b5;

  color-scheme: dark;
}

/* ============================================================
   SKIN: Slate — cool gray dark, indigo accent
   ============================================================ */
[data-skin="slate"] {
  --bg:        #0e1014;
  --surface:   #15171c;
  --surface-2: #1b1e25;
  --surface-3: #22262f;
  --hover:     #1f232b;
  --border:    #272b34;
  --border-2:  #343944;
  --divider:   #1f232b;

  --text:      #eceef3;
  --text-2:    #a0a5b3;
  --text-3:    #6e7387;
  --text-4:    #474c5d;

  --accent:    oklch(0.70 0.16 270);
  --accent-2:  oklch(0.78 0.15 270);
  --accent-3:  oklch(0.30 0.08 270);
  --on-accent: #ffffff;
  --on-danger: #ffffff;

  --success:   oklch(0.74 0.15 155);
  --warning:   oklch(0.80 0.15 75);
  --danger:    oklch(0.72 0.18 25);
  --info:      oklch(0.74 0.14 245);
  --purple:    oklch(0.74 0.16 295);

  --success-bg: color-mix(in oklch, var(--success) 12%, transparent);
  --warning-bg: color-mix(in oklch, var(--warning) 12%, transparent);
  --danger-bg:  color-mix(in oklch, var(--danger) 14%, transparent);
  --info-bg:    color-mix(in oklch, var(--info) 12%, transparent);
  --purple-bg:  color-mix(in oklch, var(--purple) 12%, transparent);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.6);

  --code-bg:   #1b1e25;
  --code-fg:   #a0a5b3;

  color-scheme: dark;
}

/* ============================================================
   SKIN: Paper — warm cream, sepia-leaning, amber accent
   ============================================================ */
[data-skin="paper"] {
  --bg:        #f6f1e7;
  --surface:   #fcf8ef;
  --surface-2: #f1ecdf;
  --surface-3: #ebe4d2;
  --hover:     #ede7d7;
  --border:    #e0d8c2;
  --border-2:  #c9bfa3;
  --divider:   #e8e0c9;

  --text:      #2a2419;
  --text-2:    #6a5f44;
  --text-3:    #948a6c;
  --text-4:    #b8ad8c;

  --accent:    oklch(0.55 0.14 60);
  --accent-2:  oklch(0.62 0.14 60);
  --accent-3:  oklch(0.94 0.04 60);
  --on-accent: #ffffff;
  --on-danger: #ffffff;

  --success:   oklch(0.55 0.12 145);
  --warning:   oklch(0.65 0.14 70);
  --danger:    oklch(0.55 0.18 25);
  --info:      oklch(0.55 0.13 240);
  --purple:    oklch(0.55 0.14 295);

  --success-bg: oklch(0.95 0.04 145);
  --warning-bg: oklch(0.95 0.04 70);
  --danger-bg:  oklch(0.95 0.04 25);
  --info-bg:    oklch(0.95 0.04 240);
  --purple-bg:  oklch(0.95 0.04 295);

  --shadow-sm: 0 1px 2px rgba(60,40,15,.05);
  --shadow-md: 0 4px 12px rgba(60,40,15,.07);
  --shadow-lg: 0 12px 32px rgba(60,40,15,.10);

  --code-bg:   #ebe4d2;
  --code-fg:   #6a5f44;

  color-scheme: light;
}

/* ============================================================
   SKIN: Terminal — modernized homage to the original
   Keeps the green personality but controlled.
   ============================================================ */
[data-skin="terminal"] {
  --bg:        #0a0d10;
  --surface:   #0f1318;
  --surface-2: #141921;
  --surface-3: #1a2029;
  --hover:     #182029;
  --border:    #1f2731;
  --border-2:  #2a3340;
  --divider:   #182029;

  --text:      #d6dde6;
  --text-2:    #8a96a8;
  --text-3:    #5b6678;
  --text-4:    #3a4253;

  --accent:    oklch(0.82 0.18 152);
  --accent-2:  oklch(0.88 0.18 152);
  --accent-3:  oklch(0.28 0.10 152);
  --on-accent: #06120a;
  --on-danger: #ffffff;

  --success:   oklch(0.82 0.18 152);
  --warning:   oklch(0.82 0.16 80);
  --danger:    oklch(0.70 0.20 22);
  --info:      oklch(0.74 0.14 240);
  --purple:    oklch(0.74 0.16 295);

  --success-bg: color-mix(in oklch, var(--success) 10%, transparent);
  --warning-bg: color-mix(in oklch, var(--warning) 12%, transparent);
  --danger-bg:  color-mix(in oklch, var(--danger) 14%, transparent);
  --info-bg:    color-mix(in oklch, var(--info) 12%, transparent);
  --purple-bg:  color-mix(in oklch, var(--purple) 12%, transparent);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 6px 16px rgba(0,0,0,.6);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.7);

  --code-bg:   #141921;
  --code-fg:   #8a96a8;

  /* Terminal skin uses mono more aggressively for personality */
  --font-ui: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
}