/* ============================================================
   Command Center — Design Tokens (tokens.css)
   Converted from brand tokens v3 (tokens.jsx). OKLCH palette.
   Single source of truth for all marketing pages + 404.
   ============================================================ */

:root {
  /* Dark surface family */
  --cc-bg: oklch(0.16 0.024 256);
  --cc-bg-panel: oklch(0.20 0.030 256);
  --cc-bg-card: oklch(0.23 0.034 256);
  --cc-bg-deep: oklch(0.11 0.020 256);

  /* Light surface family */
  --cc-cream: oklch(0.97 0.006 80);
  --cc-paper: oklch(0.94 0.008 80);
  --cc-ink-on-light: oklch(0.22 0.030 256);

  /* Ink */
  --cc-ink: oklch(0.96 0.012 220);
  --cc-ink-soft: oklch(0.78 0.020 240);
  --cc-ink-dim: oklch(0.58 0.030 250);
  --cc-ink-mute: oklch(0.40 0.020 250);

  /* Brand */
  --cc-cyan: #00f0ff;
  --cc-cyan-soft: oklch(0.78 0.13 210);
  --cc-violet: #a855f7;
  --cc-violet-soft: oklch(0.62 0.16 290);

  /* Functional */
  --cc-pink: oklch(0.66 0.21 12);
  --cc-mint: oklch(0.78 0.14 162);
  --cc-amber: oklch(0.83 0.16 80);
  --cc-rose: oklch(0.74 0.14 12);
  --cc-sky: oklch(0.78 0.12 230);

  /* Hairlines */
  --cc-hairline: oklch(0.96 0.012 220 / 0.08);
  --cc-hairline-2: oklch(0.96 0.012 220 / 0.14);

  /* Category data palette (v3) — fg / bg / text triplets. Single source for app CAT_COLORS (main.jsx, A3 Task 0) + marketing. */
  --cat-personal-fg: oklch(0.78 0.16 0);   --cat-personal-bg: oklch(0.78 0.16 0 / 0.12);   --cat-personal-text: oklch(0.88 0.10 0);
  --cat-work-fg: oklch(0.72 0.14 270);     --cat-work-bg: oklch(0.72 0.14 270 / 0.14);     --cat-work-text: oklch(0.85 0.10 270);
  --cat-school-fg: oklch(0.80 0.14 170);   --cat-school-bg: oklch(0.80 0.14 170 / 0.12);   --cat-school-text: oklch(0.89 0.10 170);
  --cat-health-fg: oklch(0.78 0.13 180);   --cat-health-bg: oklch(0.78 0.13 180 / 0.12);   --cat-health-text: oklch(0.88 0.09 180);
  --cat-finance-fg: oklch(0.83 0.16 80);   --cat-finance-bg: oklch(0.83 0.16 80 / 0.12);   --cat-finance-text: oklch(0.91 0.11 80);
  --cat-home-fg: oklch(0.80 0.14 120);     --cat-home-bg: oklch(0.80 0.14 120 / 0.12);     --cat-home-text: oklch(0.89 0.10 120);
  --cat-family-fg: oklch(0.78 0.14 30);    --cat-family-bg: oklch(0.78 0.14 30 / 0.12);    --cat-family-text: oklch(0.88 0.10 30);
  --cat-hobby-fg: oklch(0.74 0.16 320);    --cat-hobby-bg: oklch(0.74 0.16 320 / 0.12);    --cat-hobby-text: oklch(0.86 0.11 320);

  /* Type families */
  --cc-font-display: 'Space Grotesk', system-ui, sans-serif;
  --cc-font-body: 'Outfit', system-ui, sans-serif;
  --cc-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radii + shadows */
  --cc-radius: 14px;
  --cc-radius-sm: 10px;
  --cc-radius-lg: 20px;
  --cc-shadow-card: 0 6px 18px oklch(0.04 0.02 256 / 0.45);
  --cc-shadow-cta: 0 10px 30px oklch(0.78 0.13 210 / 0.28);

  /* ── App layer (dashboard) — additive; marketing pages unaffected ── */
  --cc-app-bg: var(--cc-bg-deep);
  --cc-app-panel: var(--cc-bg-panel);
  --cc-app-card: var(--cc-bg-card);
  --cc-line-1: oklch(0.96 0.012 220 / 0.04);
  --cc-line-2: oklch(0.96 0.012 220 / 0.06);
  --cc-line-3: oklch(0.96 0.012 220 / 0.08);
  --cc-line-4: oklch(0.96 0.012 220 / 0.12);
  --cc-line-5: oklch(0.96 0.012 220 / 0.16);
  --cc-overlay-1: oklch(0.96 0.012 220 / 0.25);
  --cc-overlay-2: oklch(0.96 0.012 220 / 0.40);
  --cc-indigo: oklch(0.62 0.16 276);

  /* ── Themeable accent layer — Stage 0 defaults to brand cyan (byte-identical) ── */
  --cc-accent:      var(--cc-cyan);
  --cc-accent-weak: color-mix(in oklch, var(--cc-cyan) 14%, transparent);
  --cc-on-accent:   #08141a;

  /* ── Luminous layer (A3) — accent-derived, rationed by the glow allowlist ── */
  --cc-glow-pct: 20%;                                          /* dark presets; light presets override to ~8% */
  --cc-glow:        color-mix(in oklch, var(--cc-accent) var(--cc-glow-pct), transparent);
  --cc-glow-strong: color-mix(in oklch, var(--cc-accent) 35%, transparent);

  /* Pre-JS fallback = Onyx v2 (JS applyTheme re-asserts on boot). Overrides the legacy defaults above.
     NOTE: --cc-on-accent is LIGHT ink here — matte sea-glass (Y 0.351) sits below
     onAccentInk's 0.45 threshold, unlike the retired teal (Y 0.514). Keep in sync. */
  --cc-app-bg: #0F0F11; --cc-app-panel: #18181B; --cc-app-card: #1F1F23;
  --cc-ink: #F2F3F5; --cc-ink-soft: #B9BCC2; --cc-ink-dim: #82868D; --cc-ink-mute: #565A61;
  --cc-accent: #7FA8A0; --cc-on-accent: #f7fbff;
  --cc-accent-weak: color-mix(in srgb, #7FA8A0 14%, transparent);
}

/* ── Self-hosted fonts (download per Phase 2A Task A2) ───────── */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/outfit-700.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/outfit-800.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2'); }

/* ── Base reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--cc-font-body);
  background: var(--cc-bg);
  color: var(--cc-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: oklch(0.78 0.13 210 / 0.35); }
a { color: inherit; }
img, svg { max-width: 100%; }
img { display: block; }

/* Skip-to-content link (a11y) */
.cc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cc-cyan); color: var(--cc-bg);
  padding: 10px 16px; border-radius: 0 0 8px 0;
  font-family: var(--cc-font-display); font-weight: 600;
}
.cc-skip:focus { left: 0; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}