:root {
  /* --- Base palette (locked) --- */
  --violet-500: #c9a0e8;
  --violet-600: #a875cf;
  --violet-300: #e2c9f5;
  --gold-500: #eab766;
  --gold-600: #cf9b46;
  --gold-300: #f5d99f;
  --rose-500: #ff8fae;
  --rose-600: #e26788;
  --rose-300: #ffbccf;
  --cream-500: #fbeed9;
  --cream-600: #e9d8bd;

  --deep-900: #120d1c;
  --deep-800: #1a1428;
  --deep-700: #26193a;
  --deep-600: #341f4d;

  /* extra semantic hues, matched lightness/chroma to the locked accents so status colors feel native, not bolted on */
  --success-500: oklch(78% 0.12 155);
  --success-600: oklch(66% 0.13 155);
  --info-500: oklch(78% 0.09 240);
  --info-600: oklch(66% 0.1 240);
  --danger-500: oklch(72% 0.15 22);
  --danger-600: oklch(60% 0.16 22);
  --neutral-400: oklch(70% 0.02 296);
  --neutral-600: oklch(50% 0.02 296);

  /* --- Semantic aliases: dark theme (default) --- */
  --color-bg: var(--deep-900);
  --color-bg-gradient: linear-gradient(180deg, var(--deep-900) 0%, var(--deep-700) 100%);
  --color-surface-1: var(--deep-800);
  --color-surface-2: var(--deep-700);
  --color-surface-raised: var(--deep-600);
  --color-border: oklch(45% 0.04 296 / 0.4);
  --color-border-strong: oklch(60% 0.06 296 / 0.55);

  --color-text-primary: var(--cream-500);
  --color-text-secondary: oklch(85% 0.02 70 / 0.72);
  --color-text-muted: oklch(85% 0.02 70 / 0.48);
  --color-text-on-accent: var(--deep-900);

  --color-accent-violet: var(--violet-500);
  --color-accent-gold: var(--gold-500);
  --color-accent-rose: var(--rose-500);
  --color-accent-primary: var(--violet-500);

  --color-status-info: var(--info-500);
  --color-status-success: var(--success-500);
  --color-status-warning: var(--gold-500);
  --color-status-danger: var(--danger-500);
  --color-status-neutral: var(--neutral-400);

  --color-focus-ring: var(--violet-300);
}

/* --- Light theme variant --- */
[data-theme="light"] {
  --color-bg: #faf6f0;
  --color-bg-gradient: linear-gradient(180deg, #fbf8f3 0%, #f2e9f6 100%);
  --color-surface-1: #ffffff;
  --color-surface-2: #f5eef8;
  --color-surface-raised: #ffffff;
  --color-border: oklch(30% 0.02 296 / 0.14);
  --color-border-strong: oklch(30% 0.03 296 / 0.24);

  --color-text-primary: #241a33;
  --color-text-secondary: oklch(30% 0.03 296 / 0.75);
  --color-text-muted: oklch(30% 0.03 296 / 0.5);
  --color-text-on-accent: #2a1a3d;

  --color-accent-violet: var(--violet-600);
  --color-accent-gold: var(--gold-600);
  --color-accent-rose: var(--rose-600);
  --color-accent-primary: var(--violet-600);

  --color-status-info: var(--info-600);
  --color-status-success: var(--success-600);
  --color-status-warning: var(--gold-600);
  --color-status-danger: var(--danger-600);
  --color-status-neutral: var(--neutral-600);

  --color-focus-ring: var(--violet-600);
}
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --font-display: "Baloo 2", "Segoe UI Rounded", sans-serif; /* mascot dialogue, titles, big stats — rounded & friendly */
  --font-body: "Inter", -apple-system, sans-serif; /* UI copy, dense data */
  --font-mono: "JetBrains Mono", "SF Mono", monospace; /* terminal/CRT accents, codes, serials, status readouts */

  --text-xs: 0.75rem;   /* 12px — meta, timestamps */
  --text-sm: 0.875rem;  /* 14px — secondary UI text */
  --text-base: 1rem;    /* 16px — body */
  --text-md: 1.125rem;  /* 18px — emphasized body, mascot dialogue */
  --text-lg: 1.375rem;  /* 22px — card titles */
  --text-xl: 1.75rem;   /* 28px — section headers */
  --text-2xl: 2.25rem;  /* 36px — screen titles */
  --text-3xl: 3rem;     /* 48px — hero / big numbers */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em; /* mono labels, eyebrow text, badges */
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;   /* cards, panels */
  --radius-xl: 28px;   /* "monitor" containers, modals */
  --radius-pill: 999px;

  --container-max: 1280px;
  --sidebar-width: 264px;
}
:root {
  --shadow-card: 0 2px 8px oklch(10% 0.03 296 / 0.35), 0 12px 32px oklch(10% 0.03 296 / 0.28);
  --shadow-raised: 0 4px 16px oklch(10% 0.03 296 / 0.4), 0 20px 48px oklch(10% 0.03 296 / 0.32);

  --glow-violet: 0 0 0 1px oklch(75% 0.13 296 / 0.35), 0 0 24px oklch(70% 0.15 296 / 0.35);
  --glow-gold: 0 0 0 1px oklch(80% 0.13 80 / 0.35), 0 0 24px oklch(78% 0.15 80 / 0.35);
  --glow-rose: 0 0 0 1px oklch(75% 0.13 10 / 0.35), 0 0 24px oklch(72% 0.16 10 / 0.35);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 420ms;

  /* subtle CRT scanline texture — used sparingly behind hero/terminal moments, never under dense data */
  --texture-scanlines: repeating-linear-gradient(
    0deg,
    oklch(100% 0 0 / 0.03) 0px,
    oklch(100% 0 0 / 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}

[data-theme="light"] {
  --shadow-card: 0 1px 3px oklch(30% 0.02 296 / 0.08), 0 8px 24px oklch(30% 0.02 296 / 0.1);
  --shadow-raised: 0 2px 8px oklch(30% 0.02 296 / 0.1), 0 16px 40px oklch(30% 0.02 296 / 0.14);
}