/* ==========================================================================
   SpaceKap UI Kit 1.1.1 — design tokens
   Single source of truth for colour, type, spacing, radius, shadow, z-index.
   Loaded by EVERY tool in BOTH portals (live + v2) once the tool is tokenised
   (head snippet writes this <link> unconditionally); ui.css / ui.js stay v2-only.
   Immutable release: never edit this file after publish — cut 1.1.2 instead.
   Rules: docs/PORTAL_CONVENTIONS.md §5.

   1.1.1 vs 1.1.0: derived colours are the EXACT 1.0.4 palette again (literals).
   1.1.0 computed them with color-mix() and drifted up to 19 dE from the palette
   (amber text / border, green tints) — a mix cannot reproduce a hand-tuned
   palette. Knob → family derivation now lives in the Theme Studio (JavaScript,
   per-token OKLCH offsets learned from this palette): edit a KNOB there and the
   studio publishes the whole family as overrides; the kit stays the baseline.

   Layout of this file
     1. KNOBS      — the 18 values a theme is made of (Theme Studio edits these)
     2. DERIVED    — every other --sk-* colour, literal, tuned to the knobs above
     3. TYPE/RADIUS scale (calc from the base size / radius — exact), shadows
     4. STRUCTURE  — spacing, z-index, layout, motion (not theme, never edit per theme)
     5. DOMAIN     — data colours (regions, chart series)
     6. dark block — same layout, dark values
     7. @property  — colour tokens registered so getComputedStyle() returns a
                     resolved colour and an invalid override falls back to the kit
     8. deprecated neutral ramp + legacy alias layer (html.sk-v2 only)
   Every 1.0.4 token name still exists; nothing needs a rename.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- 1. KNOBS ---- */
  --sk-brand: #e31e24;
  --sk-bg: #f5f6fa;
  --sk-surface: #ffffff;
  --sk-surface-inv: #1a1a2e;       /* dark bars on a light page (header, footer) */
  --sk-text: #1a1a2e;
  --sk-text-sec: #667085;
  --sk-text-inv: #ffffff;
  --sk-success: #16a34a;
  --sk-warning: #f59e0b;
  --sk-danger:  #dc2626;
  --sk-info:    #2563eb;
  --sk-accent:  #7c3aed;
  --sk-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sk-font-mono: ui-monospace, Consolas, 'Courier New', monospace;
  --sk-fs-base: 14px;
  --sk-r: 8px;

  /* ---- 2. DERIVED (literal; families of the knobs above) ---- */
  --sk-brand-hover: #c41a20;
  --sk-brand-soft: rgba(227, 30, 36, 0.10);
  --sk-brand-ring: 0 0 0 3px rgba(227, 30, 36, 0.18);

  --sk-surface-2: #f9fafb;
  --sk-surface-3: #f0f2f5;
  --sk-text-muted: #98a2b3;
  --sk-border: #e5e7eb;
  --sk-border-strong: #cccccc;
  --sk-overlay: rgba(16, 19, 24, 0.55);

  --sk-success-text: #15803d;  --sk-success-bg: #dcfce7;  --sk-success-border: #bbf7d0;
  --sk-warning-text: #b45309;  --sk-warning-bg: #fef3c7;  --sk-warning-border: #fde68a;
  --sk-danger-text:  #b91c1c;  --sk-danger-bg:  #fee2e2;  --sk-danger-border:  #fecaca;
  --sk-info-text:    #1d4ed8;  --sk-info-bg:    #dbeafe;  --sk-info-border:    #bfdbfe;
  --sk-accent-text:  #6d28d9;  --sk-accent-bg:  #ede9fe;  --sk-accent-border:  #ddd6fe;

  --sk-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* ---- 3. type scale from the base size (1.0.4 values reproduced exactly) ---- */
  --sk-fs-xs: calc(var(--sk-fs-base) - 3px);
  --sk-fs-sm: calc(var(--sk-fs-base) - 2px);
  --sk-fs-md: calc(var(--sk-fs-base) - 1px);
  --sk-fs-lg: calc(var(--sk-fs-base) + 2px);
  --sk-fs-h4: calc(var(--sk-fs-base) + 2px);
  --sk-fs-h3: calc(var(--sk-fs-base) + 4px);
  --sk-fs-h2: calc(var(--sk-fs-base) + 6px);
  --sk-fs-h1: calc(var(--sk-fs-base) + 10px);
  --sk-fs-display: calc(var(--sk-fs-base) + 18px);
  --sk-lh-tight: 1.25;
  --sk-lh: 1.45;
  --sk-fw-normal: 400;
  --sk-fw-medium: 500;
  --sk-fw-semibold: 600;
  --sk-fw-bold: 700;

  /* radius scale from the base radius */
  --sk-r-sm: calc(var(--sk-r) - 2px);
  --sk-r-lg: calc(var(--sk-r) + 4px);
  --sk-r-xl: calc(var(--sk-r) + 8px);
  --sk-r-full: 999px;

  /* shadow (three levels) */
  --sk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --sk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sk-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.18);

  /* ---- 4. STRUCTURE (not theme) ---- */
  --sk-s1: 4px;
  --sk-s2: 8px;
  --sk-s3: 12px;
  --sk-s4: 16px;
  --sk-s5: 20px;
  --sk-s6: 24px;
  --sk-s8: 32px;
  --sk-s10: 40px;
  --sk-s12: 48px;

  --sk-z-raised: 10;
  --sk-z-sticky: 100;
  --sk-z-dropdown: 200;
  --sk-z-drawer: 300;
  --sk-z-modal: 400;
  --sk-z-toast: 500;
  --sk-z-top: 1000;

  --sk-touch: 44px;
  --sk-content-max: 1280px;
  --sk-topbar-h: 56px;
  --sk-sidenav-w: 240px;
  --sk-sidenav-rail-w: 64px;     /* deprecated: the icon rail was removed in shell 2.1.0 */
  --sk-gutter: 16px;

  --sk-t-fast: 120ms;
  --sk-t: 180ms;
  --sk-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- 5. DOMAIN (data colours, one place) ---- */
  --sk-region-ca: var(--sk-brand);     /* Fibrobec / Canada chip */
  --sk-region-us: var(--sk-info);      /* Spacekap / US chip */
  --sk-chart-1: var(--sk-brand);
  --sk-chart-2: var(--sk-info);
  --sk-chart-3: var(--sk-success);
  --sk-chart-4: var(--sk-warning);
  --sk-chart-5: var(--sk-accent);
  --sk-chart-6: #0891b2;
  --sk-chart-7: #db2777;
  --sk-chart-8: var(--sk-text-sec);
}

/* Breakpoints (documented constants — media queries cannot read custom props):
   md = 768px (tablet), lg = 1024px (desktop, full side nav). */

/* ---- 6. DARK ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* knobs */
  --sk-brand: #ef4444;
  --sk-bg: #101318;
  --sk-surface: #181c24;
  --sk-surface-inv: #0d0f14;
  --sk-text: #e8eaf0;
  --sk-text-sec: #a3adbf;
  --sk-text-inv: #ffffff;
  --sk-success: #4ade80;
  --sk-warning: #fbbf24;
  --sk-danger:  #f87171;
  --sk-info:    #60a5fa;
  --sk-accent:  #a78bfa;
  /* derived */
  --sk-brand-hover: #e31e24;
  --sk-brand-soft: rgba(239, 68, 68, 0.16);
  --sk-brand-ring: 0 0 0 3px rgba(239, 68, 68, 0.28);
  --sk-surface-2: #1f242e;
  --sk-surface-3: #262c38;
  --sk-text-muted: #737e93;
  --sk-border: #2b303c;
  --sk-border-strong: #3a4150;
  --sk-overlay: rgba(0, 0, 0, 0.65);
  --sk-success-text: #6ee7b7;  --sk-success-bg: rgba(22, 163, 74, 0.16);  --sk-success-border: rgba(22, 163, 74, 0.35);
  --sk-warning-text: #fbbf24;  --sk-warning-bg: rgba(245, 158, 11, 0.16); --sk-warning-border: rgba(245, 158, 11, 0.35);
  --sk-danger-text:  #fca5a5;  --sk-danger-bg:  rgba(220, 38, 38, 0.18);  --sk-danger-border:  rgba(239, 68, 68, 0.35);
  --sk-info-text:    #93c5fd;  --sk-info-bg:    rgba(37, 99, 235, 0.18);  --sk-info-border:    rgba(59, 130, 246, 0.35);
  --sk-accent-text:  #c4b5fd;  --sk-accent-bg:  rgba(124, 58, 237, 0.18); --sk-accent-border:  rgba(124, 58, 237, 0.35);
  --sk-focus: 0 0 0 3px rgba(96, 165, 250, 0.45);
  --sk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --sk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --sk-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* ---- 7. Registered colour tokens: computed value = a resolved colour.
   getComputedStyle(root).getPropertyValue('--sk-x') returns rgb(...) (Theme Studio
   contrast table, SK.theme.color()), and an invalid published override falls back to
   the kit default instead of breaking. Browsers without @property (Firefox < 128)
   simply treat these as plain custom props. ---- */
@property --sk-brand { syntax: '<color>'; inherits: true; initial-value: #e31e24; }
@property --sk-brand-hover { syntax: '<color>'; inherits: true; initial-value: #c41a20; }
@property --sk-brand-soft { syntax: '<color>'; inherits: true; initial-value: rgba(227, 30, 36, 0.10); }
@property --sk-bg { syntax: '<color>'; inherits: true; initial-value: #f5f6fa; }
@property --sk-surface { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --sk-surface-2 { syntax: '<color>'; inherits: true; initial-value: #f9fafb; }
@property --sk-surface-3 { syntax: '<color>'; inherits: true; initial-value: #f0f2f5; }
@property --sk-surface-inv { syntax: '<color>'; inherits: true; initial-value: #1a1a2e; }
@property --sk-text { syntax: '<color>'; inherits: true; initial-value: #1a1a2e; }
@property --sk-text-sec { syntax: '<color>'; inherits: true; initial-value: #667085; }
@property --sk-text-muted { syntax: '<color>'; inherits: true; initial-value: #98a2b3; }
@property --sk-text-inv { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --sk-border { syntax: '<color>'; inherits: true; initial-value: #e5e7eb; }
@property --sk-border-strong { syntax: '<color>'; inherits: true; initial-value: #cccccc; }
@property --sk-overlay { syntax: '<color>'; inherits: true; initial-value: rgba(16, 19, 24, 0.55); }
@property --sk-success { syntax: '<color>'; inherits: true; initial-value: #16a34a; }
@property --sk-success-text { syntax: '<color>'; inherits: true; initial-value: #15803d; }
@property --sk-success-bg { syntax: '<color>'; inherits: true; initial-value: #dcfce7; }
@property --sk-success-border { syntax: '<color>'; inherits: true; initial-value: #bbf7d0; }
@property --sk-warning { syntax: '<color>'; inherits: true; initial-value: #f59e0b; }
@property --sk-warning-text { syntax: '<color>'; inherits: true; initial-value: #b45309; }
@property --sk-warning-bg { syntax: '<color>'; inherits: true; initial-value: #fef3c7; }
@property --sk-warning-border { syntax: '<color>'; inherits: true; initial-value: #fde68a; }
@property --sk-danger { syntax: '<color>'; inherits: true; initial-value: #dc2626; }
@property --sk-danger-text { syntax: '<color>'; inherits: true; initial-value: #b91c1c; }
@property --sk-danger-bg { syntax: '<color>'; inherits: true; initial-value: #fee2e2; }
@property --sk-danger-border { syntax: '<color>'; inherits: true; initial-value: #fecaca; }
@property --sk-info { syntax: '<color>'; inherits: true; initial-value: #2563eb; }
@property --sk-info-text { syntax: '<color>'; inherits: true; initial-value: #1d4ed8; }
@property --sk-info-bg { syntax: '<color>'; inherits: true; initial-value: #dbeafe; }
@property --sk-info-border { syntax: '<color>'; inherits: true; initial-value: #bfdbfe; }
@property --sk-accent { syntax: '<color>'; inherits: true; initial-value: #7c3aed; }
@property --sk-accent-text { syntax: '<color>'; inherits: true; initial-value: #6d28d9; }
@property --sk-accent-bg { syntax: '<color>'; inherits: true; initial-value: #ede9fe; }
@property --sk-accent-border { syntax: '<color>'; inherits: true; initial-value: #ddd6fe; }
@property --sk-region-ca { syntax: '<color>'; inherits: true; initial-value: #e31e24; }
@property --sk-region-us { syntax: '<color>'; inherits: true; initial-value: #2563eb; }
@property --sk-chart-1 { syntax: '<color>'; inherits: true; initial-value: #e31e24; }
@property --sk-chart-2 { syntax: '<color>'; inherits: true; initial-value: #2563eb; }
@property --sk-chart-3 { syntax: '<color>'; inherits: true; initial-value: #16a34a; }
@property --sk-chart-4 { syntax: '<color>'; inherits: true; initial-value: #f59e0b; }
@property --sk-chart-5 { syntax: '<color>'; inherits: true; initial-value: #7c3aed; }
@property --sk-chart-6 { syntax: '<color>'; inherits: true; initial-value: #0891b2; }
@property --sk-chart-7 { syntax: '<color>'; inherits: true; initial-value: #db2777; }
@property --sk-chart-8 { syntax: '<color>'; inherits: true; initial-value: #667085; }

/* ==========================================================================
   8a. Deprecated neutral ramp — kept so 1.0.x consumers keep resolving.
   New code uses the semantic tokens above; Theme Studio does not list these.
   ========================================================================== */
:root {
  --sk-n0: #ffffff;
  --sk-n50: #f9fafb;
  --sk-n100: #f5f6fa;
  --sk-n150: #f0f2f5;
  --sk-n200: #e5e7eb;
  --sk-n300: #cccccc;
  --sk-n500: #98a2b3;
  --sk-n600: #667085;
  --sk-n800: #1a1a2e;
  --sk-n900: #101318;
}

/* ==========================================================================
   8b. Legacy alias layer (v2 shell only).
   Lets a tool that still declares its own :root variables adopt the kit with
   no CSS renames. Under html.sk-v2 these win over the tool's own :root because
   tokens.css is written into <head> BEFORE the tool's <style> and the selector
   below is more specific than bare :root. A tokenised tool (sk-tokens:1) no
   longer needs this layer: its own :root already points at --sk-*.
   ========================================================================== */
html.sk-v2:root, html.sk-v2:root[data-theme="dark"] {
  --bg: var(--sk-bg);
  --surface: var(--sk-surface);
  --surface-2: var(--sk-surface-2);
  --surface-3: var(--sk-surface-3);
  --card: var(--sk-surface);
  --bg-card: var(--sk-surface);
  --panel: var(--sk-surface);
  --text: var(--sk-text);
  --text-sec: var(--sk-text-sec);
  --text-sub: var(--sk-text-sec);
  --text-muted: var(--sk-text-muted);
  --muted: var(--sk-text-muted);
  --text-inv: var(--sk-text-inv);
  --inverse: var(--sk-text-inv);
  --border: var(--sk-border);
  --border-strong: var(--sk-border-strong);
  --primary: var(--sk-brand);
  --primary-dark: var(--sk-brand-hover);
  --primary-light: var(--sk-brand-soft);
  --accent: var(--sk-brand);
  --red: var(--sk-danger);
  --danger: var(--sk-danger);
  --danger-bg: var(--sk-danger-bg);
  --danger-text: var(--sk-danger-text);
  --danger-border: var(--sk-danger-border);
  --err: var(--sk-danger);
  --success: var(--sk-success);
  --success-bg: var(--sk-success-bg);
  --success-text: var(--sk-success-text);
  --green: var(--sk-success);
  --green-bg: var(--sk-success-bg);
  --ok: var(--sk-success);
  --warning: var(--sk-warning);
  --warning-bg: var(--sk-warning-bg);
  --warning-text: var(--sk-warning-text);
  --warning-border: var(--sk-warning-border);
  --amber: var(--sk-warning);
  --info: var(--sk-info);
  --info-bg: var(--sk-info-bg);
  --info-text: var(--sk-info-text);
  --blue: var(--sk-info);
  --tint-green-bg: var(--sk-success-bg);
  --tint-green-text: var(--sk-success-text);
  --tint-amber-bg: var(--sk-warning-bg);
  --tint-amber-text: var(--sk-warning-text);
  --tint-amber-border: var(--sk-warning-border);
  --tint-red-bg: var(--sk-danger-bg);
  --tint-red-text: var(--sk-danger-text);
  --tint-red-border: var(--sk-danger-border);
  --tint-blue-bg: var(--sk-info-bg);
  --tint-blue-text: var(--sk-info-text);
  --tint-indigo-bg: var(--sk-accent-bg);
  --tint-indigo-text: var(--sk-accent-text);
  --tint-violet-bg: var(--sk-accent-bg);
  --tint-violet-text: var(--sk-accent-text);
  --radius: var(--sk-r);
  --radius-sm: var(--sk-r-sm);
  --radius-lg: var(--sk-r-lg);
  --radius-xl: var(--sk-r-xl);
  --radius-full: var(--sk-r-full);
  --font: var(--sk-font);
  --font-ui: var(--sk-font);
  --mono: var(--sk-font-mono);
  --d-mono: var(--sk-font-mono);
  --font-mono: var(--sk-font-mono);
  --shadow: var(--sk-shadow-sm);
  --shadow-sm: var(--sk-shadow-sm);
  --shadow-md: var(--sk-shadow-md);
  --shadow-lg: var(--sk-shadow-lg);
}