/* kube-hat design tokens
 *
 * All color, spacing, typography, and elevation values live here.
 * Every theme swaps the same set of CSS custom properties.
 * Components consume tokens — they never hardcode colors.
 */

:root {
  color-scheme: dark light;

  /* Type scale */
  --font-sans: "Rajdhani", "Space Grotesk", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-body: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-body: 1.5;

  /* Spacing scale (4px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Radius scale */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 9999px;

  /* Elevation (shadow) scale */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --elev-3: 0 12px 28px rgba(0, 0, 0, 0.45);
  --elev-4: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --dur-slow: 400ms;

  /* Layout */
  --layout-sidebar-w: 240px;
  --layout-sidebar-w-collapsed: 68px;
  --layout-topbar-h: 60px;
  --layout-max-w: 1440px;

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-sidebar: 150;
  --z-topbar: 160;
  --z-modal: 200;
  --z-toast: 300;

  /* Semantic status (theme-neutral) */
  --success: #1fb472;
  --warning: #f0b429;
  --danger: #e5484d;
  --info: #3b82f6;
}

/* ============================================================
   DARK (default, sci-fi mint)
   ============================================================ */
body[data-theme="dark"],
body:not([data-theme]) {
  --bg: #0a1210;
  --bg-panel: #0e1a17;
  --bg-panel-raised: #122521;
  --bg-input: #0b1814;
  --bg-hover: rgba(23, 244, 192, 0.08);
  --bg-active: rgba(23, 244, 192, 0.14);

  --ink: #e3fbf5;
  --ink-dim: #b4d7cf;
  --muted: #7ba398;
  --muted-2: #5a7c73;

  --accent: #17f4c0;
  --accent-dark: #0fb48e;
  --accent-bright: #4ffadd;
  --accent-contrast: #04110d;
  --accent-soft: rgba(23, 244, 192, 0.15);
  --accent-softer: rgba(23, 244, 192, 0.08);

  --border: rgba(88, 160, 140, 0.28);
  --border-strong: rgba(88, 160, 140, 0.55);
  --border-accent: rgba(23, 244, 192, 0.4);

  --glow: 0 0 22px rgba(23, 244, 192, 0.22);
  --glow-soft: 0 0 14px rgba(23, 244, 192, 0.12);

  --card: linear-gradient(180deg, rgba(18, 37, 33, 0.92), rgba(12, 28, 24, 0.92));
  --grid-line: rgba(255, 255, 255, 0.035);

  --notice-bg: rgba(44, 18, 16, 0.85);
  --notice-border: rgba(255, 106, 93, 0.6);
  --notice-ink: #ffd0c8;

  --success-soft: rgba(31, 180, 114, 0.18);
  --warning-soft: rgba(240, 180, 41, 0.18);
  --danger-soft: rgba(229, 72, 77, 0.2);
  --info-soft: rgba(59, 130, 246, 0.18);
}

/* ============================================================
   DARK-PURPLE
   ============================================================ */
body[data-theme="dark-purple"] {
  --bg: #120a1a;
  --bg-panel: #1a1026;
  --bg-panel-raised: #24163a;
  --bg-input: #120824;
  --bg-hover: rgba(177, 120, 255, 0.08);
  --bg-active: rgba(177, 120, 255, 0.14);

  --ink: #efe6ff;
  --ink-dim: #d1bff5;
  --muted: #a68dd0;
  --muted-2: #7d6aa0;

  --accent: #b178ff;
  --accent-dark: #8750d6;
  --accent-bright: #c99aff;
  --accent-contrast: #120719;
  --accent-soft: rgba(177, 120, 255, 0.18);
  --accent-softer: rgba(177, 120, 255, 0.08);

  --border: rgba(136, 96, 180, 0.3);
  --border-strong: rgba(136, 96, 180, 0.55);
  --border-accent: rgba(177, 120, 255, 0.4);

  --glow: 0 0 22px rgba(177, 120, 255, 0.22);
  --glow-soft: 0 0 14px rgba(177, 120, 255, 0.12);

  --card: linear-gradient(180deg, rgba(36, 22, 58, 0.92), rgba(22, 12, 38, 0.92));
  --grid-line: rgba(255, 255, 255, 0.04);

  --notice-bg: rgba(44, 14, 18, 0.85);
  --notice-border: rgba(255, 106, 125, 0.6);
  --notice-ink: #ffd0d9;

  --success-soft: rgba(31, 180, 114, 0.18);
  --warning-soft: rgba(240, 180, 41, 0.18);
  --danger-soft: rgba(229, 72, 77, 0.2);
  --info-soft: rgba(59, 130, 246, 0.18);
}

/* ============================================================
   DARK-RED
   ============================================================ */
body[data-theme="dark-red"] {
  --bg: #1a0a0a;
  --bg-panel: #261212;
  --bg-panel-raised: #341818;
  --bg-input: #1f0c0c;
  --bg-hover: rgba(255, 106, 93, 0.08);
  --bg-active: rgba(255, 106, 93, 0.14);

  --ink: #ffe6e6;
  --ink-dim: #e9c2c2;
  --muted: #c48f8f;
  --muted-2: #946666;

  --accent: #ff6a5d;
  --accent-dark: #d64b3f;
  --accent-bright: #ff8f85;
  --accent-contrast: #190507;
  --accent-soft: rgba(255, 106, 93, 0.18);
  --accent-softer: rgba(255, 106, 93, 0.08);

  --border: rgba(180, 90, 90, 0.3);
  --border-strong: rgba(180, 90, 90, 0.55);
  --border-accent: rgba(255, 106, 93, 0.4);

  --glow: 0 0 22px rgba(255, 106, 93, 0.22);
  --glow-soft: 0 0 14px rgba(255, 106, 93, 0.12);

  --card: linear-gradient(180deg, rgba(52, 24, 24, 0.92), rgba(30, 14, 14, 0.92));
  --grid-line: rgba(255, 255, 255, 0.04);

  --notice-bg: rgba(50, 14, 14, 0.85);
  --notice-border: rgba(255, 77, 109, 0.6);
  --notice-ink: #ffcfcf;

  --success-soft: rgba(31, 180, 114, 0.18);
  --warning-soft: rgba(240, 180, 41, 0.18);
  --danger-soft: rgba(229, 72, 77, 0.2);
  --info-soft: rgba(59, 130, 246, 0.18);
}

/* ============================================================
   DARK-GREEN (closer to refs' SciFi look)
   ============================================================ */
body[data-theme="dark-green"] {
  --bg: #0b150f;
  --bg-panel: #12201a;
  --bg-panel-raised: #182e25;
  --bg-input: #0d1c15;
  --bg-hover: rgba(63, 230, 140, 0.08);
  --bg-active: rgba(63, 230, 140, 0.14);

  --ink: #e7fbed;
  --ink-dim: #bfdcc8;
  --muted: #8aae95;
  --muted-2: #60826c;

  --accent: #3fe68c;
  --accent-dark: #1fb472;
  --accent-bright: #6ff2a7;
  --accent-contrast: #04110b;
  --accent-soft: rgba(63, 230, 140, 0.18);
  --accent-softer: rgba(63, 230, 140, 0.08);

  --border: rgba(88, 150, 110, 0.3);
  --border-strong: rgba(88, 150, 110, 0.55);
  --border-accent: rgba(63, 230, 140, 0.4);

  --glow: 0 0 22px rgba(63, 230, 140, 0.22);
  --glow-soft: 0 0 14px rgba(63, 230, 140, 0.12);

  --card: linear-gradient(180deg, rgba(24, 46, 37, 0.92), rgba(14, 28, 22, 0.92));
  --grid-line: rgba(255, 255, 255, 0.035);

  --notice-bg: rgba(44, 18, 16, 0.85);
  --notice-border: rgba(255, 106, 93, 0.6);
  --notice-ink: #ffd0c8;

  --success-soft: rgba(31, 180, 114, 0.18);
  --warning-soft: rgba(240, 180, 41, 0.18);
  --danger-soft: rgba(229, 72, 77, 0.2);
  --info-soft: rgba(59, 130, 246, 0.18);
}

/* ============================================================
   LIGHT
   ============================================================ */
body[data-theme="light"] {
  color-scheme: light;

  --bg: #f2f7fb;
  --bg-panel: #ffffff;
  --bg-panel-raised: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: rgba(12, 198, 160, 0.08);
  --bg-active: rgba(12, 198, 160, 0.14);

  --ink: #17212b;
  --ink-dim: #354a5c;
  --muted: #5f7081;
  --muted-2: #8a9aa9;

  --accent: #0cc6a0;
  --accent-dark: #08977b;
  --accent-bright: #12dcb5;
  --accent-contrast: #021014;
  --accent-soft: rgba(12, 198, 160, 0.16);
  --accent-softer: rgba(12, 198, 160, 0.06);

  --border: rgba(40, 80, 110, 0.15);
  --border-strong: rgba(40, 80, 110, 0.3);
  --border-accent: rgba(12, 198, 160, 0.4);

  --glow: 0 0 18px rgba(12, 198, 160, 0.2);
  --glow-soft: 0 0 12px rgba(12, 198, 160, 0.1);

  --card: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 253, 0.98));
  --grid-line: rgba(12, 198, 160, 0.07);

  --notice-bg: rgba(255, 230, 224, 0.95);
  --notice-border: rgba(224, 98, 79, 0.5);
  --notice-ink: #7a2e22;

  --success-soft: rgba(31, 180, 114, 0.12);
  --warning-soft: rgba(240, 180, 41, 0.15);
  --danger-soft: rgba(229, 72, 77, 0.12);
  --info-soft: rgba(59, 130, 246, 0.12);
}