/* ============================================================================
   COLDLOADS — tokens.css  ·  single source of truth for the design system
   Namespace: --cl-*  (isolated — never collides with styles.css --bg/--primary
   or match.css --space-*/--color-*). Safe to load on any page; inert until used.
   Two themes:  [data-theme="dark"] = VS Code "Dark (Visual Studio)" / Dark+
                [data-theme="light"] = Solarized Light
   Sources: ethanschoonover.com/solarized · github.com/microsoft/vscode (dark_vs.json)
   Spec: zamtraveler-vault/projects/coldloads-redesign-2026-10/SPEC.md
   Created 2026-10-04 (Wave 0, redesign, design-only).
   ============================================================================ */

:root {
  /* — structural scales (theme-invariant) — */
  --cl-space-1: 4px;  --cl-space-2: 8px;  --cl-space-3: 12px; --cl-space-4: 16px;
  --cl-space-5: 20px; --cl-space-6: 24px; --cl-space-8: 32px; --cl-space-10: 40px; --cl-space-12: 48px;

  --cl-text-xs: 11px; --cl-text-sm: 12px; --cl-text-base: 13px; --cl-text-md: 14px;
  --cl-text-lg: 16px; --cl-text-xl: 20px; --cl-text-2xl: 24px; --cl-text-3xl: 32px;

  --cl-radius-xs: 4px; --cl-radius-sm: 6px; --cl-radius-md: 8px;
  --cl-radius-lg: 12px; --cl-radius-xl: 16px; --cl-radius-pill: 999px;

  --cl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --cl-font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --cl-dur-fast: 120ms; --cl-dur-base: 200ms; --cl-dur-slow: 320ms;
  --cl-ease-out: cubic-bezier(.2,.8,.2,1);
  --cl-ease-spring: cubic-bezier(.2,1.1,.3,1);

  --cl-z-nav: 9999; --cl-z-dropdown: 10050; --cl-z-modal: 99998; --cl-z-toast: 99999;

  /* elevation (uses theme --cl-shadow-color) */
  --cl-shadow-1: 0 1px 2px var(--cl-shadow-color);
  --cl-shadow-2: 0 2px 6px var(--cl-shadow-color);
  --cl-shadow-3: 0 8px 22px var(--cl-shadow-color);
  --cl-shadow-4: 0 16px 40px var(--cl-shadow-color);

  /* density (compact default; pages opt in via [data-cl-density]) */
  --cl-row-h: 30px; --cl-cell-y: 5px; --cl-cell-x: 10px; --cl-card-pad: 9px; --cl-gap: 8px;
}
[data-cl-density="comfortable"] {
  --cl-row-h: 40px; --cl-cell-y: 9px; --cl-cell-x: 14px; --cl-card-pad: 13px; --cl-gap: 12px;
}

/* ===== DARK  ·  VS Code "Dark (Visual Studio)" / Dark+  (default) ===== */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --cl-bg: #1e1e1e;             /* editor.background */
  --cl-surface: #252526;        /* sideBar.background — cards/panels */
  --cl-surface-2: #2a2d2e;      /* list.hoverBackground */
  --cl-surface-hover: #2d2d30;
  --cl-sunken: #181818;
  --cl-text: #d4d4d4;           /* editor.foreground (11.25:1) */
  --cl-text-muted: #9d9d9d;     /* ~5:1 AA */
  --cl-faint: #6e7681;
  --cl-border: #3c3c3c;         /* panel/divider */
  --cl-border-strong: #4a4a4a;
  --cl-chrome: #323233;         /* title/nav bar */
  --cl-primary: #3794ff;        /* textLink — link TEXT on dark (AA) */
  --cl-primary-fill: #0e639c;   /* button.background (white text 6.4:1) */
  --cl-primary-fill-hover: #1177bb;
  --cl-primary-dim: #04395e;    /* list.activeSelectionBackground */
  --cl-accent: #007acc;         /* signature blue — status bar / focus / fills */
  --cl-accent-fg: #ffffff;
  --cl-focus: #007fd4;
  --cl-success: #4ec9b0; --cl-success-bg: rgba(78,201,176,.14);
  --cl-warning: #cca700; --cl-warning-bg: rgba(204,167,0,.14);
  --cl-danger:  #f14c4c; --cl-danger-bg:  rgba(241,76,76,.14);
  --cl-info:    #59a4f9;
  --cl-cyan: #4ec9b0; --cl-violet: #a78bfa; --cl-orange: #ce9178; --cl-magenta: #d16d9e;  /* violet = true purple (was VS Code pink #c586c0 — Boss: ELITE looked pink) */
  --cl-heat-hot: #f14c4c; --cl-heat-warm: #cca700; --cl-heat-cold: #4ec9b0;
  --cl-shadow-color: rgba(0,0,0,.42);
}

/* ===== LIGHT  ·  warm + VIVID (Boss 2026-10-04 v2: colors were too dull, make
   them juicy/saturated across the spectrum, prettier; keep Ghibli warm grounds +
   visible contours; fix visibility — bright cards pop off a grounded canvas and
   near-black ink makes everything (ELITE badges etc) readable). ===== */
:root[data-theme="light"] {
  color-scheme: light;
  --cl-bg: #ece6d8;             /* warm light canvas */
  --cl-surface: #fcf9f2;        /* bright warm card — cells POP off the canvas */
  --cl-surface-2: #f3eee1;      /* zebra / hover */
  --cl-surface-hover: #f7f2e7;
  --cl-sunken: #e6dfcd;         /* wells / inputs */
  --cl-text: #2a271f;           /* near-black warm ink (~14:1 — everything visible) */
  --cl-text-muted: #5c5444;     /* readable muted (~6.5:1) */
  --cl-faint: #897d64;          /* secondary/decorative */
  --cl-border: #cbbb90;         /* visible warm contour */
  --cl-border-strong: #9a8458;
  --cl-chrome: #e3dcc8;         /* nav bar — warm */
  --cl-primary: #1565c0;        /* VIVID blue — links/icons/button (~6:1) */
  --cl-primary-fill: #1565c0;
  --cl-primary-fill-hover: #0f52a0;
  --cl-primary-dim: rgba(21,101,192,.14);
  --cl-accent: #1565c0;
  --cl-accent-fg: #ffffff;
  --cl-focus: #1565c0;
  --cl-success: #0f9d4f; --cl-success-bg: rgba(15,157,79,.16);   /* VIVID green (no more dull olive) */
  --cl-warning: #e08700; --cl-warning-bg: rgba(224,135,0,.16);   /* VIVID amber-gold */
  --cl-danger:  #e12d39; --cl-danger-bg:  rgba(225,45,57,.13);   /* VIVID red */
  --cl-info:    #1565c0;
  --cl-cyan: #0d9488; --cl-violet: #7c3aed; --cl-orange: #ea6a1e; --cl-magenta: #d6267d;  /* juicy teal/purple/orange/pink */
  --cl-heat-hot: #ef4123; --cl-heat-warm: #f59e0b; --cl-heat-cold: #0d9488;
  --cl-shadow-color: rgba(60,48,30,.18);
}

/* Respect OS preference when no explicit data-theme is set (site defaults to
   dark via cl-common.js, so this is a belt-and-suspenders fallback). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --cl-bg:#ece6d8;--cl-surface:#fcf9f2;--cl-surface-2:#f3eee1;--cl-surface-hover:#f7f2e7;--cl-sunken:#e6dfcd;
    --cl-text:#2a271f;--cl-text-muted:#5c5444;--cl-faint:#897d64;--cl-border:#cbbb90;--cl-border-strong:#9a8458;--cl-chrome:#e3dcc8;
    --cl-primary:#1565c0;--cl-primary-fill:#1565c0;--cl-primary-fill-hover:#0f52a0;--cl-primary-dim:rgba(21,101,192,.14);
    --cl-accent:#1565c0;--cl-accent-fg:#ffffff;--cl-focus:#1565c0;
    --cl-success:#0f9d4f;--cl-success-bg:rgba(15,157,79,.16);--cl-warning:#e08700;--cl-warning-bg:rgba(224,135,0,.16);
    --cl-danger:#e12d39;--cl-danger-bg:rgba(225,45,57,.13);--cl-info:#1565c0;
    --cl-cyan:#0d9488;--cl-violet:#7c3aed;--cl-orange:#ea6a1e;--cl-magenta:#d6267d;
    --cl-heat-hot:#ef4123;--cl-heat-warm:#f59e0b;--cl-heat-cold:#0d9488;--cl-shadow-color:rgba(60,48,30,.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --cl-dur-fast: 0ms; --cl-dur-base: 0ms; --cl-dur-slow: 0ms; }
}