/* ============================================================
   Design tokens
   Dark mode is the default; the light theme overrides these
   values via the [data-theme="light"] selector.
   ============================================================ */

:root {
  /* Typography */
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-hero: 3.5rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-body: 1.6;

  /* Color */
  --bg: #0a0a0b;
  --bg-elevated: #111113;
  --bg-soft: #16161a;
  --text-primary: #f5f5f4;
  --text-secondary: #9a9a9f;
  --text-muted: #5f5f66;
  --border: #1e1e24;
  --border-strong: #2a2a32;
  --accent: #8ab4f8;
  --accent-soft: rgba(138, 180, 248, 0.12);
  --success: #4ade80;
  --grid-line: rgba(255, 255, 255, 0.03);
  --dock-bg: rgba(17, 17, 19, 0.72);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  /* Layout */
  --container: 1080px;
  --container-pad: 1.5rem;
  --header-height: 72px;
  --section-gap: var(--space-16);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Misc */
  --transition: 180ms ease;
  --transition-slow: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --max-width: 620px;
}

[data-theme="light"] {
  --bg: #fafafa;
  --bg-elevated: #ffffff;
  --bg-soft: #f2f2f3;
  --text-primary: #161616;
  --text-secondary: #55555c;
  --text-muted: #8a8a92;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --accent: #1a56c4;
  --accent-soft: rgba(26, 86, 196, 0.08);
  --success: #16a34a;
  --grid-line: rgba(0, 0, 0, 0.03);
  --dock-bg: rgba(255, 255, 255, 0.78);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
}