/*
 * THEME.CSS — Single source of truth for every design token.
 * Edit the variables below to retheme the entire site instantly.
 *
 * To change colour scheme: edit the :root block.
 * To change light mode defaults: edit the [data-theme="light"] block.
 * To change fonts: edit --font-heading and --font-body.
 */

/* ─── Dark mode (default) ──────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:           #0a0a0a;
  --bg-surface:   #141414;
  --bg-elevated:  #1a1a1a;
  --bg-code:      #0d0d0d;

  /* Borders */
  --border:       #1f1f1f;
  --border-mid:   #2a2a2a;
  --border-strong:#3a3a3a;

  /* Text */
  --text:         #f0f0f0;
  --text-2:       #888888;
  --text-3:       #555555;
  --text-heading: #ffffff;
  --text-inverted:#0a0a0a;

  /* Accent (easy to swap — change ONE value to retheme) */
  --accent:       #4ade80;
  --accent-hover: #22c55e;
  --accent-faint: rgba(74,222,128,.08);
  --accent-glow:  rgba(74,222,128,.15);

  /* Link colour */
  --link:         #60a5fa;
  --link-hover:   #93c5fd;

  /* Fonts */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --max-w:         1200px;
  --max-w-content: 720px;
  --nav-h:         64px;

  /* Radii */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --transition: 150ms ease;
  --transition-md: 250ms ease;
}

/* ─── Light mode ───────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:           #fafafa;
  --bg-surface:   #ffffff;
  --bg-elevated:  #f5f5f5;
  --bg-code:      #f0f0f0;

  --border:       #e5e5e5;
  --border-mid:   #d4d4d4;
  --border-strong:#b4b4b4;

  --text:         #171717;
  --text-2:       #525252;
  --text-3:       #a3a3a3;
  --text-heading: #0a0a0a;
  --text-inverted:#ffffff;

  --accent:       #16a34a;
  --accent-hover: #15803d;
  --accent-faint: rgba(22,163,74,.08);
  --accent-glow:  rgba(22,163,74,.15);

  --link:         #2563eb;
  --link-hover:   #1d4ed8;
}