/* ==========================================================================
   SpaceKap UI Kit 1.0.1 — design tokens
   Single source of truth for colour, type, spacing, radius, shadow, z-index.
   Loaded by the v2 shell and by every tool running under ?shell=v2.
   Immutable release: never edit this file after publish — cut 1.0.1 instead.
   Rules: docs/PORTAL_CONVENTIONS.md §5.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- brand ---- */
  --sk-brand: #e31e24;
  --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);

  /* ---- neutral ramp (one ramp; Tailwind-derived, already the majority) ---- */
  --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;

  /* ---- semantic surfaces & text ---- */
  --sk-bg: var(--sk-n100);
  --sk-surface: var(--sk-n0);
  --sk-surface-2: var(--sk-n50);
  --sk-surface-3: var(--sk-n150);
  --sk-text: var(--sk-n800);
  --sk-text-sec: var(--sk-n600);
  --sk-text-muted: var(--sk-n500);
  --sk-text-inv: #ffffff;
  --sk-border: var(--sk-n200);
  --sk-border-strong: var(--sk-n300);
  --sk-overlay: rgba(16, 19, 24, 0.55);

  /* ---- semantic states: base / text-on-light / tint background ---- */
  --sk-success: #16a34a;  --sk-success-text: #15803d;  --sk-success-bg: #dcfce7;  --sk-success-border: #bbf7d0;
  --sk-warning: #f59e0b;  --sk-warning-text: #b45309;  --sk-warning-bg: #fef3c7;  --sk-warning-border: #fde68a;
  --sk-danger:  #dc2626;  --sk-danger-text:  #b91c1c;  --sk-danger-bg:  #fee2e2;  --sk-danger-border:  #fecaca;
  --sk-info:    #2563eb;  --sk-info-text:    #1d4ed8;  --sk-info-bg:    #dbeafe;  --sk-info-border:    #bfdbfe;
  --sk-accent:  #7c3aed;  --sk-accent-text:  #6d28d9;  --sk-accent-bg:  #ede9fe;  --sk-accent-border:  #ddd6fe;

  /* ---- typography ---- */
  --sk-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sk-font-mono: ui-monospace, Consolas, 'Courier New', monospace;
  --sk-fs-xs: 11px;
  --sk-fs-sm: 12px;
  --sk-fs-md: 13px;
  --sk-fs-base: 14px;
  --sk-fs-lg: 16px;
  --sk-fs-h4: 16px;
  --sk-fs-h3: 18px;
  --sk-fs-h2: 20px;
  --sk-fs-h1: 24px;
  --sk-fs-display: 32px;
  --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;

  /* ---- spacing (4 px base) ---- */
  --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;

  /* ---- radius ---- */
  --sk-r-sm: 6px;
  --sk-r: 8px;
  --sk-r-lg: 12px;
  --sk-r-xl: 16px;
  --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);

  /* ---- z-index layer scale ---- */
  --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;

  /* ---- layout ---- */
  --sk-touch: 44px;
  --sk-content-max: 1280px;
  --sk-topbar-h: 56px;
  --sk-sidenav-w: 240px;
  --sk-sidenav-rail-w: 64px;
  --sk-gutter: 16px;
  --sk-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);

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

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

:root[data-theme="dark"] {
  color-scheme: dark;
  --sk-brand: #ef4444;
  --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-bg: #101318;
  --sk-surface: #181c24;
  --sk-surface-2: #1f242e;
  --sk-surface-3: #262c38;
  --sk-text: #e8eaf0;
  --sk-text-sec: #a3adbf;
  --sk-text-muted: #737e93;
  --sk-text-inv: #ffffff;
  --sk-border: #2b303c;
  --sk-border-strong: #3a4150;
  --sk-overlay: rgba(0, 0, 0, 0.65);

  --sk-success: #4ade80;  --sk-success-text: #6ee7b7;  --sk-success-bg: rgba(22, 163, 74, 0.16);  --sk-success-border: rgba(22, 163, 74, 0.35);
  --sk-warning: #fbbf24;  --sk-warning-text: #fbbf24;  --sk-warning-bg: rgba(245, 158, 11, 0.16); --sk-warning-border: rgba(245, 158, 11, 0.35);
  --sk-danger:  #f87171;  --sk-danger-text:  #fca5a5;  --sk-danger-bg:  rgba(220, 38, 38, 0.18);  --sk-danger-border:  rgba(239, 68, 68, 0.35);
  --sk-info:    #60a5fa;  --sk-info-text:    #93c5fd;  --sk-info-bg:    rgba(37, 99, 235, 0.18);  --sk-info-border:    rgba(59, 130, 246, 0.35);
  --sk-accent:  #a78bfa;  --sk-accent-text:  #c4b5fd;  --sk-accent-bg:  rgba(124, 58, 237, 0.18); --sk-accent-border:  rgba(124, 58, 237, 0.35);

  --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);
  --sk-focus: 0 0 0 3px rgba(96, 165, 250, 0.45);
}

/* ==========================================================================
   Legacy alias layer.
   Lets the ~45 tools that already declare :root variables adopt the kit
   with one <link> and 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.
   Tools delete their own :root block once their checklist closes.
   ========================================================================== */
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);
}