/* ═══════════════════════════════════════════════════
   0x888 Design Tokens v2 — OKLCH
   Source of truth for all visual properties.
   Edit this file to change the entire portal palette.
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Core palette (OKLCH) ────────────────────────── */
  --color-black:     oklch(0% 0 none);
  --color-base:      oklch(9.5% 0.015 267);   /* #050510 */
  --color-elevated:  oklch(12% 0.02 267);     /* #08081a */
  --color-surface:   oklch(80% 0.15 200 / 0.025);
  --color-surface-h: oklch(80% 0.15 200 / 0.06);
  --color-fg:        oklch(93% 0.01 255);     /* #e0e8f4 */
  --color-muted:     oklch(48% 0.04 260);     /* #4a5a7a */
  --color-dim:       oklch(28% 0.03 260);     /* #1e2a3e */

  /* ── Accent (cyan) ───────────────────────────────── */
  --color-accent:    oklch(80% 0.15 200);     /* #00e5ff */
  --color-accent-g:  oklch(80% 0.15 200 / 0.25);
  --color-accent-d:  oklch(80% 0.15 200 / 0.06);

  /* ── Semantic ────────────────────────────────────── */
  --color-success:   oklch(82% 0.20 155);     /* #00ff88 */
  --color-success-g: oklch(82% 0.20 155 / 0.18);
  --color-warn:      oklch(80% 0.14 75);      /* #ffb444 */
  --color-warn-g:    oklch(80% 0.14 75 / 0.18);
  --color-danger:    oklch(62% 0.22 10);      /* #ff3366 */
  --color-danger-g:  oklch(62% 0.22 10 / 0.18);

  /* ── Utility colors ──────────────────────────────── */
  --color-util-indigo: oklch(75% 0.06 280);   /* #a5b4fc */

  /* ── Borders ─────────────────────────────────────── */
  --border-subtle:   oklch(80% 0.15 200 / 0.06);
  --border-glow:     oklch(80% 0.15 200 / 0.15);

  /* ── Typography ──────────────────────────────────── */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Easing ──────────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* ── Spacing (4pt grid) ──────────────────────────── */
  --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-14: 56px;
  --space-15: 60px;

  /* ── Typography scale ────────────────────────────── */
  --text-xs:  0.625rem;   /* 10px */
  --text-sm:  0.75rem;    /* 12px */
  --text-base: 0.875rem;  /* 14px */
  --text-lg:  1rem;       /* 16px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-4xl: 2.5rem;     /* 40px */
  --text-hero: clamp(4rem, 10vw, 6.5rem);

  /* ── Border radius ───────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-card:  0 8px 32px oklch(0% 0 none / 0.5),
                  0 0 40px oklch(80% 0.15 200 / 0.04);
  --shadow-glow:  0 0 60px var(--color-accent-g),
                  0 0 120px oklch(80% 0.15 200 / 0.1);
  --shadow-success: 0 0 10px var(--color-success);
}

/* ── Dark mode (default) ──────────────────────────── */
:root {
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════
   Legacy alias mapping — maps old var names to new tokens.
   Remove when all components use new token names.
   ═══════════════════════════════════════════════════ */
:root {
  --bg: var(--color-base);
  --bg-elevated: var(--color-elevated);
  --surface: var(--color-surface);
  --surface-hover: var(--color-surface-h);
  --fg: var(--color-fg);
  --muted: var(--color-muted);
  --dim: var(--color-dim);
  --border: var(--border-subtle);
  --border-glow: var(--border-glow);
  --accent: var(--color-accent);
  --accent-glow: var(--color-accent-g);
  --accent-dim: var(--color-accent-d);
  --success: var(--color-success);
  --success-glow: var(--color-success-g);
  --warn: var(--color-warn);
  --warn-glow: var(--color-warn-g);
  --danger: var(--color-danger);
  --danger-glow: var(--color-danger-g);
}