/*
  Design tokens — single source of truth for color, type, spacing, radii.
  Changing the site's look (e.g. swapping fonts) should mean editing values
  here only, never touching individual component files.
*/

:root {
  /* Color — §4 */
  --color-bg-primary: #F8F5EF;      /* Warm Ivory — page backgrounds, section fields */
  --color-bg-secondary: #FFFFFF;    /* Soft White — cards, forms, elevated surfaces */
  --color-text-primary: #2E241C;    /* Deep Espresso — body copy, headings */
  --color-accent-gold: #B88A2A;     /* Antique Gold — dividers, icon strokes, monogram, borders */
  --color-accent-burgundy: #6B2C2C; /* Rich Burgundy — primary CTAs, hover, active nav underline */

  /* Derived / utility colors */
  --color-text-inverse: #FFFFFF;
  --color-text-muted: #6B5D4F;
  --color-border-hairline: rgba(184, 138, 42, 0.28);
  --color-overlay-scrim: rgba(46, 36, 28, 0.55);
  --color-focus-ring: #B88A2A;

  /* Fonts — §5 */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale — desktop */
  --text-hero-h1: 64px;
  --text-h2: 40px;
  --text-h3: 26px;
  --text-body: 17px;
  --text-nav: 14px;
  --text-quote: 28px;

  /* Type scale — mobile (applied under 768px in typography.css) */
  --text-hero-h1-mobile: 36px;
  --text-h2-mobile: 28px;
  --text-h3-mobile: 22px;
  --text-body-mobile: 16px;
  --text-quote-mobile: 22px;

  --line-height-body: 1.7;
  --line-height-heading: 1.15;
  --letter-spacing-nav: 0.08em;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-padding: var(--space-lg);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

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

  /* Elevation */
  --shadow-card: 0 2px 12px rgba(46, 36, 28, 0.08);
  --shadow-card-hover: 0 8px 28px rgba(46, 36, 28, 0.14);

  /* Breakpoints (referenced in comments; media queries use literal px) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Z-index scale */
  --z-header: 100;
  --z-mobile-nav: 200;
  --z-lightbox: 300;
}