/* ============================================================
   tokens.css — Single source of truth for design tokens.
   Color palette, typography scale, spacing, motion, z-index.
   Loaded first; consumed by base.css, layout.css, components.css.
   ============================================================ */

:root {
  /* === Color palette === */
  --color-bg: #FAFAF7;          /* warm off-white */
  --color-bg-elevated: #FFFFFF; /* cards, elevated surfaces */
  --color-bg-dark: #1A1F1C;     /* near-black with green tint */
  --color-ink: #1A1F1C;         /* primary text */
  --color-ink-muted: #5C625E;   /* secondary text */
  --color-ink-faded: #9BA09D;   /* metadata, labels */
  --color-accent: #2F4A3A;      /* forest green — primary brand */
  --color-accent-hover: #243A2D;
  --color-accent-warm: #C97B3F; /* warm amber — narrow CTA use */
  --color-accent-warm-hover: #B26830;
  --color-divider: #E6E4DD;     /* subtle dividers */
  --color-overlay: rgba(26, 31, 28, 0.72);
  --color-error: #B23A3A;

  /* === Typography === */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-size-display: clamp(2.5rem, 5vw + 1rem, 5rem);
  --font-size-h1: clamp(2rem, 3vw + 1rem, 3.25rem);
  --font-size-h2: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
  --font-size-h3: clamp(1.125rem, 1vw + 0.75rem, 1.375rem);
  --font-size-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --font-size-small: 0.875rem;
  --font-size-meta: 0.8125rem;

  --line-height-tight: 1.15;
  --line-height-snug: 1.35;
  --line-height-body: 1.65;

  --letter-spacing-display: -0.02em;
  --letter-spacing-meta: 0.08em;
  --letter-spacing-button: 0.04em;

  /* === Layout === */
  --container-max: 72rem;       /* 1152px */
  --container-narrow: 56rem;    /* 896px for prose */
  --container-padding: clamp(1.5rem, 4vw, 3rem);
  --section-spacing: clamp(5rem, 10vw, 8rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);

  /* === Borders, radii === */
  --radius-card: 4px;
  --radius-button: 4px;
  --radius-badge: 999px;
  --border-thin: 1px solid var(--color-divider);

  /* === Motion === */
  --ease-soft: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 200ms;
  --duration-medium: 400ms;
  --duration-slow: 600ms;
  --duration-image: 800ms;

  /* === Z-index scale === */
  --z-header: 50;
  --z-cookie: 80;
  --z-lightbox: 90;
  --z-skiplink: 100;

  /* === Shadows (used sparingly) === */
  --shadow-sticky: 0 1px 0 rgba(0, 0, 0, 0.04);
}