/* ═══════════════════════════════════════════════════════════════
   design-tokens.css
   Single source of truth for all visual decisions.
   Edit here — every page updates automatically.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Colors ─────────────────────────────────────────────────── */
  --color-bg:           #ffffff;
  --color-surface:      #f7f8fa;
  --color-surface-2:    #f0f2f5;
  --color-border:       #e5e7eb;
  --color-border-soft:  #edf0f3;

  --color-text:         #1f2328;
  --color-text-muted:   #57606a;
  --color-text-faint:   #9ea8b3;

  --color-accent:       #3b82d4;   /* primary blue */
  --color-accent-dark:  #2563a8;
  --color-secondary:    #7c5cd8;   /* purple — use sparingly */
  --color-green:        #22863a;
  --color-amber:        #d97706;
  --color-red:          #c0392b;

  /* Dark-mode surfaces (used in hero / overlay sections) */
  --color-dark-bg:      #0d1117;
  --color-dark-surface: #161b22;
  --color-dark-border:  #30363d;
  --color-dark-text:    #e6edf3;
  --color-dark-muted:   #8b949e;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-sans:   -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:   "SF Mono", "Menlo", "Consolas", monospace;
  --font-serif:  "Georgia", "Times New Roman", serif;

  --text-xs:    0.72rem;
  --text-sm:    0.83rem;
  --text-base:  0.94rem;
  --text-md:    1.05rem;
  --text-lg:    1.2rem;
  --text-xl:    1.45rem;
  --text-2xl:   1.8rem;
  --text-3xl:   2.4rem;
  --text-hero:  clamp(2rem, 5vw, 3.8rem);

  --leading-tight:  1.25;
  --leading-normal: 1.65;
  --leading-loose:  1.85;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

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

  /* ── Layout ──────────────────────────────────────────────────── */
  --max-width:       760px;
  --max-width-wide:  1100px;
  --max-width-full:  100%;

  /* ── Borders & Radius ────────────────────────────────────────── */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-normal:  250ms ease;
  --transition-slow:    400ms ease;

  /* ── Z-index layers ──────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     1;
  --z-nav:      100;
  --z-overlay:  200;
  --z-modal:    300;
}

/* ── Dark mode media query override ────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:          #0d1117;
    --color-surface:     #161b22;
    --color-surface-2:   #1c2230;
    --color-border:      #30363d;
    --color-border-soft: #21262d;
    --color-text:        #e6edf3;
    --color-text-muted:  #8b949e;
    --color-text-faint:  #484f58;
    --color-accent:      #58a6ff;
    --color-accent-dark: #388bfd;
    --color-secondary:   #a371f7;
  }
}