/* ============================================================
   DESIGN TOKENS
   Dials: VARIANCE 6 / MOTION 5 / DENSITY 4 (Developer Portfolio preset)
   Anti-slop locks:
   - Accent: single Emerald, locked across whole page (no AI-purple)
   - Neutrals: warm-cool balanced zinc, off-black/off-white (no pure #000/#fff)
   - Shape: one radius scale
   - Theme: auto (prefers-color-scheme) + manual toggle, page-level lock
   ============================================================ */

:root {
  /* ---- Type families ---- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (fluid, clamp) ---- */
  --fs-display: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem); /* hero H1 */
  --fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.075rem;
  --fs-small: 0.875rem;
  --fs-mono-label: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.65;

  --tracking-tight: -0.02em;
  --tracking-label: 0.08em;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Shape (one radius system) ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --maxw: 1080px;
  --maxw-prose: 65ch;
  --nav-h: 64px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-mid: 0.32s;
  --dur-slow: 0.6s;

  /* ---- Accent (Emerald, locked) ---- */
  --accent: #10a37f;
  --accent-strong: #0d8a6a;
  --accent-soft: rgba(16, 163, 127, 0.12);
  --accent-contrast: #08120e; /* off-black text on emerald: light 6.03:1, dark 7.95:1 - both pass WCAG AA */
}

/* ============================================================
   LIGHT THEME (default) - off-white base, warm-cool neutral zinc
   ============================================================ */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa;
  --bg-elevated: #ffffff;
  --bg-inset: #f4f4f5;
  --text: #1c1c1f;        /* off-black, not pure #000 */
  --text-muted: #52525b;  /* zinc-600, >4.5:1 on --bg */
  --text-faint: #71717a;  /* zinc-500, for large/secondary only */
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --shadow-color: 220 20% 40%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.08);
  --shadow-md: 0 6px 24px -8px hsl(var(--shadow-color) / 0.16);
}

/* ============================================================
   DARK THEME - off-black zinc, brand accent stays recognizable
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e11;          /* off-black, not pure #000 */
  --bg-elevated: #17171b;
  --bg-inset: #1c1c21;
  --text: #f4f4f5;        /* off-white, not pure #fff */
  --text-muted: #a1a1aa;  /* zinc-400, >4.5:1 on --bg */
  --text-faint: #8b8b93;
  --border: #27272c;
  --border-strong: #34343a;
  --shadow-color: 220 40% 2%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.4);
  --shadow-md: 0 8px 30px -10px hsl(var(--shadow-color) / 0.6);
  --accent: #1abc94;       /* slightly brighter emerald for dark contrast */
  --accent-strong: #2dd4aa;
  --accent-soft: rgba(26, 188, 148, 0.15);
}

/* Auto dark when user has no explicit toggle and OS prefers dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e0e11;
    --bg-elevated: #17171b;
    --bg-inset: #1c1c21;
    --text: #f4f4f5;
    --text-muted: #a1a1aa;
    --text-faint: #8b8b93;
    --border: #27272c;
    --border-strong: #34343a;
    --shadow-color: 220 40% 2%;
    --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.4);
    --shadow-md: 0 8px 30px -10px hsl(var(--shadow-color) / 0.6);
    --accent: #1abc94;
    --accent-strong: #2dd4aa;
    --accent-soft: rgba(26, 188, 148, 0.15);
  }
}