/* tokens.css — Design system variables for Mind & Matter identity */

:root {
  /* Color Palette — Live site CSS alignment */
  --ink: hsl(50, 0%, 0%);            /* Pure black — site background */
  --ink-soft: hsl(45, 5%, 10%);      /* Near-black panel */
  --charcoal: hsl(45, 5%, 16%);      /* Warm charcoal — button text on cream */
  --gold: hsl(42, 48%, 57%);         /* PRIMARY TEXT COLOR (headings + body) */
  --gold-dim: hsl(42, 30%, 45%);
  --cream: hsl(39, 22%, 87%);        /* Links, accents, button faces */
  --cream-bright: hsl(43, 26%, 95%);
  --muted: hsl(42, 15%, 50%);

  /* Typography Scale — Fluid via clamp() */
  /* Desktop anchors; mobile scales down */
  --fs-h1: clamp(2.6rem, 1.8rem + 3vw, 4rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --fs-h4: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-body: 1rem;
  --lh-heading: 1.1;
  --lh-body: 1.3;
  --ls-tight: -0.02em;

  /* Spacing Scale */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* Border Radius */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 1rem;     /* 16px */

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --measure: 70ch;  /* Optimal line length for readability */

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;

  /* Typography (Session 2 alignment: live site fonts) */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
  --font-meta: 'Roboto', system-ui, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}

/* Reduced motion: respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}