/*
 * Design tokens — jacquesmurray.space
 * Foundation: colors (light/dark), type scale, spacing scale, font stacks.
 * No component styles, no layout, no manual theme toggle — see DESIGN.md.
 * Dark mode is prefers-color-scheme only, no JS/localStorage toggle needed.
 */

:root {
  /* ---- Color: light (default — Warm Archival Paper & Deep Carbon Ink) ---- */
  --bg-primary: #faf8f5;
  --bg-secondary: #f2ede4;
  --bg-surface: #ffffff;
  --bg-muted: #ece6dc;

  --text-primary: #1c1917;
  --text-secondary: #57524d;
  --text-tertiary: #787169;

  --border-subtle: #ebe5dc;
  --border-color: #ded6ca;
  --border-strong: #b5aba0;

  --accent-color: #b8481f;
  --accent-hover: #9c3b17;
  --accent-subtle: #f7ebe4;
  --accent-color-contrast: #ffffff;

  --focus-ring: rgba(184, 72, 31, 0.45);
  --selection-bg: #f4d8cc;
  --selection-text: #1c1917;

  /* ---- Typography scale (system fonts, no webfont fetch) ---- */
  --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */

  --leading-tight: 1.25;
  --leading-normal: 1.6;  /* long-form reading default */

  /* ---- Spacing scale (4px grid) ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
}

/* ---- Color: dark (OS/browser preference only — Deep Espresso & Luminous Apricot) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #171513;
    --bg-secondary: #211e1a;
    --bg-surface: #2a2622;
    --bg-muted: #2f2a25;

    --text-primary: #f2ede4;
    --text-secondary: #a89f92;
    --text-tertiary: #857c71;

    --border-subtle: #292520;
    --border-color: #38322c;
    --border-strong: #544c43;

    --accent-color: #e08a5f;
    --accent-hover: #efa882;
    --accent-subtle: rgba(224, 138, 95, 0.12);
    --accent-color-contrast: #171513;

    --focus-ring: rgba(224, 138, 95, 0.5);
    --selection-bg: #452b1e;
    --selection-text: #f2ede4;
  }
}