/* ─── Design Tokens ─── */

:root {
  /* background */
  --color-bg:        #FAF8F5;
  --color-bg-subtle: #F3F0EB;

  /* text */
  --color-text:          #3D3630;
  --color-text-secondary: #756A60;
  --color-text-muted:     #796E63;

  /* accent */
  --color-accent:       #7E6849;
  --color-accent-hover: #6E5A42;

  /* borders & dividers */
  --color-border: #E6E1DB;

  /* spacing scale (4px grid)
   *
   * --space-2xs   4px  → tight gaps (icon-to-text, inline elements)
   * --space-xs    8px  → small padding (dropdown items, tags)
   * --space-sm   12px  → inner component padding
   * --space-md   16px  → default gap between elements
   * --space-lg   24px  → section padding, nav spacing
   * --space-xl   48px  → page margins, major section gaps
   * --space-2xl  96px  → hero/section separation
   */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;
  --space-2xl: 96px;

  /* typography
   *
   * --font-display  (Cormorant Garamond)  → serif, elegant
   *   Use for: your name, page titles, section headings, pull quotes,
   *   hero text — anything meant to make an impression.
   *   Preferred weight: 400 for large sizes, 500 for smaller.
   *
   * --font-body  (Instrument Sans)  → sans-serif, clean
   *   Use for: navigation, body text, paragraphs, buttons, labels,
   *   captions, metadata, UI elements — anything meant to be read
   *   quickly or interacted with.
   *
   * --font-mono  → monospace
   *   Use for: code snippets, technical content.
   */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* type scale
   *
   * --text-label   12px  → metadata, dates, tags, overlines
   * --text-sm      14px  → nav links, captions, secondary text
   * --text-base    16px  → body paragraphs
   * --text-lg      20px  → h3, sub-headings
   * --text-xl      24px  → h2, section titles
   * --text-2xl     32px  → h1, page titles
   * --text-3xl     40px  → hero / feature display
   */
  --text-label: 0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* radius
   *
   * --radius-sm    4px  → buttons, inputs, tags
   * --radius-md    8px  → cards, dropdowns, containers
   * --radius-full  pill → pills, avatars, circular elements
   */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 9999px;

  /* shadows
   *
   * --shadow-sm  → subtle depth (buttons, inputs)
   * --shadow-md  → floating elements (dropdowns, cards)
   * --shadow-lg  → prominent elevation (modals, hover states)
   */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.08);

  /* layout */
  --max-width: 72ch;
  --max-width-page: 1200px;
}

/* ─── Dark Mode ─── */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:        #1C1A17;
    --color-bg-subtle: #25221E;

    --color-text:          #E8E3DC;
    --color-text-secondary: #A89E94;
    --color-text-muted:     #9A8F85;

    --color-accent:       #C4A882;
    --color-accent-hover: #D4BC9A;

    --color-border: #35312C;
  }
}