/* ============================================
   DESIGN TOKENS — Bath by Designer
   Single source of truth. All pages inherit.
   ============================================ */

:root {
  /* Color Palette — Warm editorial neutrals + sage/terracotta accents */
  --color-bone: #f5f1ea;
  --color-cream: #faf7f1;
  --color-paper: #ffffff;
  --color-ink: #1a1a17;
  --color-ink-soft: #3d3a35;
  --color-stone: #8a857c;
  --color-mist: #d8d3c8;
  --color-line: #e8e3d8;

  /* Accents — restrained, editorial */
  --color-moss: #5a6b4a;
  --color-moss-deep: #3d4a32;
  --color-terracotta: #b85c3a;
  --color-clay: #c4a07a;

  /* Functional */
  --color-bg: var(--color-cream);
  --color-text: var(--color-ink);
  --color-muted: var(--color-stone);
  --color-accent: var(--color-moss);
  --color-border: var(--color-line);

  /* Typography */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Type scale — fluid */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);
  --text-4xl: clamp(2.75rem, 2.2rem + 2.5vw, 4rem);
  --text-display: clamp(3rem, 2.2rem + 4vw, 5.75rem);

  /* Spacing — geometric */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* Layout */
  --container-max: 1320px;
  --container-narrow: 720px;
  --container-reading: 680px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;

  /* Radius — minimal, editorial */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Shadows — soft, layered */
  --shadow-sm: 0 1px 2px rgba(26, 26, 23, 0.04);
  --shadow-md: 0 4px 16px rgba(26, 26, 23, 0.06);
  --shadow-lg: 0 12px 40px rgba(26, 26, 23, 0.08);
  --shadow-xl: 0 24px 60px rgba(26, 26, 23, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}