/* ============================================================
   THEME TOKENS — Dark & Light
   ============================================================ */
:root {
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --max-w: 1120px;
  --radius: 16px;
  --radius-sm: 10px;

  /* spacing scale */
  --space-section: clamp(3rem, 6vw, 5rem);

  --accent: #14b8a6;
  --accent-soft: rgba(20, 184, 166, 0.12);
  --accent-border: rgba(20, 184, 166, 0.28);

  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- DARK (default) ---------- */
[data-theme="dark"] {
  --bg: #09090b;
  --bg-alt: #0c0c0f;
  --surface: #18181b;
  --surface-2: #1f1f23;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --heading: #fafafa;
  --text: #d4d4d8;
  --muted: #8a8a93;
  --faint: #5a5a63;
  --nav-bg: rgba(9, 9, 11, 0.72);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --grid-line: rgba(255, 255, 255, 0.035);
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  --bg: #fafafa;
  --bg-alt: #f2f2f4;
  --surface: #ffffff;
  --surface-2: #f6f6f8;
  --border: rgba(9, 9, 11, 0.09);
  --border-strong: rgba(9, 9, 11, 0.16);
  --heading: #0a0a0c;
  --text: #3f3f46;
  --muted: #6b6b75;
  --faint: #9a9aa3;
  --nav-bg: rgba(250, 250, 250, 0.78);
  --shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.18);
  --grid-line: rgba(9, 9, 11, 0.04);
}

/* Smooth theme transition on key surfaces */
html.theme-anim,
html.theme-anim body,
html.theme-anim *:not(.icon-sun):not(.icon-moon) {
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}