/* ═══════════════════════════════════════════════════════
   ZUJ OL Apps — Warm Aurora Design System v2
   Palette: Deep space + Warm amber-coral aurora gradients
   Font: Noto Sans SC + JetBrains Mono
   Color Space: OKLCH
   ═══════════════════════════════════════════════════════ */

/* ── Tokens (Dark-first) ──────────────────────────────── */
:root {
  --bg: oklch(11% 0.02 270);
  --surface: oklch(15% 0.025 270);
  --surface-2: oklch(19% 0.028 270);
  --fg: oklch(97% 0.005 270);
  --muted: oklch(58% 0.028 270);
  --border: oklch(24% 0.035 270);
  --accent: oklch(74% 0.2 45);
  --accent-fg: oklch(99% 0.005 270);

  --blue: oklch(74% 0.2 45);
  --emerald: oklch(74% 0.2 165);
  --amber: oklch(83% 0.19 85);
  --violet: oklch(70% 0.24 20);
  --cyan: oklch(77% 0.16 200);
  --red: oklch(69% 0.28 25);
  --orange: oklch(76% 0.22 55);
  --pink: oklch(72% 0.26 340);

  --gradient-primary: linear-gradient(135deg, oklch(74% 0.2 45), oklch(70% 0.24 20));
  --gradient-aurora: linear-gradient(
    135deg,
    oklch(74% 0.2 45),
    oklch(70% 0.24 20),
    oklch(68% 0.22 350),
    oklch(80% 0.17 85)
  );
  --gradient-warm: linear-gradient(
    135deg,
    oklch(69% 0.28 25),
    oklch(76% 0.22 55),
    oklch(83% 0.19 85)
  );
  --gradient-shine: linear-gradient(
    135deg,
    oklch(80% 0.17 85),
    oklch(70% 0.24 20),
    oklch(68% 0.22 350)
  );
  --gradient-glow: linear-gradient(
    135deg,
    oklch(74% 0.2 45 / 30%),
    oklch(70% 0.24 20 / 30%),
    oklch(68% 0.22 350 / 20%)
  );

  --font-display: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 3px oklch(0% 0 0 / 20%);
  --shadow-raised: 0 4px 24px oklch(0% 0 0 / 30%), 0 1px 4px oklch(0% 0 0 / 20%);
  --shadow-glow: 0 0 30px oklch(74% 0.2 45 / 12%), 0 0 60px oklch(70% 0.24 20 / 8%);
  --shadow-glow-lg: 0 0 40px oklch(74% 0.2 45 / 15%), 0 0 80px oklch(70% 0.24 20 / 10%);

  --nav-height: 64px;
  --max-width: 1200px;
  --gutter: 40px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

/* ── Light mode ───────────────────────────────────────── */
:root.light {
  --bg: oklch(98% 0.005 270);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(96% 0.008 270);
  --fg: oklch(13% 0.025 270);
  --muted: oklch(46% 0.028 270);
  --border: oklch(88% 0.018 270);
  --accent: oklch(58% 0.22 45);
  --accent-fg: oklch(98% 0.005 270);

  --blue: oklch(58% 0.22 45);
  --emerald: oklch(52% 0.2 165);
  --amber: oklch(68% 0.2 85);
  --violet: oklch(55% 0.24 20);
  --cyan: oklch(52% 0.18 200);
  --red: oklch(55% 0.28 25);
  --orange: oklch(60% 0.24 55);
  --pink: oklch(52% 0.26 340);

  --gradient-primary: linear-gradient(135deg, oklch(55% 0.24 20), oklch(58% 0.22 45));
  --gradient-aurora: linear-gradient(
    135deg,
    oklch(55% 0.24 20),
    oklch(58% 0.22 45),
    oklch(52% 0.22 350),
    oklch(65% 0.18 85)
  );
  --gradient-warm: linear-gradient(
    135deg,
    oklch(55% 0.28 25),
    oklch(60% 0.24 55),
    oklch(68% 0.2 85)
  );
  --gradient-shine: linear-gradient(
    135deg,
    oklch(65% 0.18 85),
    oklch(55% 0.24 20),
    oklch(52% 0.26 340)
  );
  --gradient-glow: linear-gradient(
    135deg,
    oklch(58% 0.22 45 / 10%),
    oklch(55% 0.24 20 / 10%),
    oklch(52% 0.22 350 / 6%)
  );

  --shadow-sm: 0 1px 3px oklch(13% 0.02 270 / 6%);
  --shadow-raised: 0 4px 24px oklch(13% 0.02 270 / 8%), 0 1px 4px oklch(13% 0.02 270 / 4%);
  --shadow-glow: 0 0 30px oklch(58% 0.22 45 / 8%), 0 0 60px oklch(55% 0.24 20 / 5%);
  --shadow-glow-lg: 0 0 40px oklch(58% 0.22 45 / 10%), 0 0 80px oklch(55% 0.24 20 / 6%);

  color-scheme: light;
}