/* ═══════════════════════════════════════════════════════════════════════════════
 * Cookie AI — Design Tokens
 * ═══════════════════════════════════════════════════════════════════════════════
 * Work Unit: WU-02 — CSS Design System
 * Acceptance Criteria: REQ-03
 * ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Colours ─────────────────────────────────────────────────────────────── */
  --bg-dark:          #1A1A1B;
  --bg-cream:         #F9F7F2;
  --bg-dark-subtle:   #222223;

  --text-cream:       #F9F7F2;
  --text-dark:        #1A1A1B;
  --text-muted:       #8A8A8A;
  --text-muted-light: #B8B8B0;

  --copper:           #80422D;
  --copper-hover:     #9A5438;
  --copper-subtle:    rgba(128, 66, 45, 0.15);

  --border-dark:      #333334;
  --border-light:     #E5E2DB;

  --color-error:      #c0392b;
  --color-error-bg:   rgba(192, 57, 43, 0.08);
  --color-success:    #2d6a30;
  --color-success-bg: rgba(0, 128, 0, 0.08);

  --featured-bg:      rgba(173, 106, 79, 0.12);

  /* ─── Typography ──────────────────────────────────────────────────────────── */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;

  /* Type Scale */
  --text-hero:       clamp(6rem, 10vw, 12rem);
  --text-pull-quote: clamp(1.8rem, 3vw, 2.8rem);
  --text-h1:         clamp(2.5rem, 4vw, 3.5rem);
  --text-h2:         clamp(1.8rem, 3vw, 2.5rem);
  --text-h3:         clamp(1.3rem, 2vw, 1.6rem);
  --text-body:       1.125rem;
  --text-nav:        1rem;
  --text-small:      1rem;
  --text-label:      0.75rem;

  /* Line Heights */
  --leading-tight:  1.1;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
  --leading-display: 0.92;
  --leading-button:  1.2;

  /* Letter Spacing */
  --tracking-hero:    0.15em;
  --tracking-heading: 0.02em;
  --tracking-body:    0em;
  --tracking-nav:     0.08em;
  --tracking-caps:    0.12em;

  /* Opacity */
  --opacity-body:    0.85;
  --opacity-muted:   0.6;
  --opacity-deco:    0.35;
  --opacity-subtle:  0.5;
  --opacity-hover:   0.75;
  --opacity-deco-tablet: 0.25;

  /* ─── Spacing ─────────────────────────────────────────────────────────────── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   6rem;
  --space-2xl:  10rem;
  --section-pad:       var(--space-xl);
  --section-pad-large: var(--space-2xl);

  /* ─── Layout ──────────────────────────────────────────────────────────────── */
  --max-width:        1200px;
  --max-width-narrow:  800px;
  --max-width-wide:   1400px;

  /* ─── Breakpoints (for reference in media queries) ────────────────────────── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ─── Homepage Chrome Tokens (v2 redesign) ───────────────────────────────── */
  --color-bg:           #F5F0E8;
  --color-text:         #1A1A1A;
  --color-brand:        #B07D4F;
  --color-brand-dark:   #8A5F38;
  --color-footer-bg:    #1A1A1A;
  --color-footer-text:  #F5F0E8;
  --color-footer-brand: #B07D4F;
  --font-display:       'Helvetica Neue', Helvetica, Arial, sans-serif;
  --wordmark-size:      clamp(5.5rem, 18vw, 24rem);
}