/*
  Design tokens — approved Concept B (refined), locked.
  Values match the final design specification exactly (design artifact §10).
  Do not change these to "improve" the look — this file reproduces an
  already-approved visual direction, it doesn't reinterpret it.
*/

:root {
  /* Color */
  --color-ink: #2a241d;       /* primary body text */
  --color-paper: #faf6ef;     /* primary background */
  --color-paper-raised: #ffffff; /* cards, review tiles */
  --color-tint: #f1eae0;      /* alternate section background */
  --color-charcoal: #241f19;  /* hero text panel, footer, sticky mobile bar */
  --color-red: #c1291e;       /* the brand accent — from the logo's own red family */
  --color-red-deep: #8f1d15;  /* hover/active state for red elements */
  --color-line: #e6ddcc;      /* borders, dividers, card outlines */
  --color-muted: #6e6455;     /* secondary text */
  --color-white: #ffffff;

  /* Typography */
  --font-display: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);
  --text-h1: clamp(1.5rem, 1.1rem + 3vw, 2.5rem);

  /* Spacing scale (4px base unit) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */

  --section-padding-y: clamp(var(--space-7), 6vw, var(--space-9));
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);

  /* Radii */
  --radius-sm: 3px;  /* buttons */
  --radius-md: 6px;  /* cards, images */

  /* Shadow — used sparingly by design; most elevation is a border/background shift */
  --shadow-review: 0 6px 20px -14px rgba(0, 0, 0, 0.25);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}