/* ═══════════════════════════════════════════════════════════
   SNAP INTERIOR — DESIGN TOKENS
   Single source of truth for all visual decisions.
   8pt spacing grid · Cormorant Garamond + DM Sans · No dark mode.
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ─── COLOURS ─────────────────────────────────────────── */
  /* Brand */
  --color-cream:            #F7F3EE;
  --color-warm-white:       #FDFAF6;
  --color-deep-forest:      #1A2E1F;
  --color-forest:           #2C4A32;
  --color-sage:             #6B8F71;
  --color-sage-light:       #A8C5AC;
  --color-terracotta:       #C4704A;
  --color-terracotta-light: #E8956D;
  --color-gold:             #C9A96E;
  --color-gold-light:       #E8D5A3;

  /* Neutrals */
  --color-charcoal:         #2A2A2A;
  --color-dark:             #2A2A2A;
  --color-mid-gray:         #666666;
  --color-light-gray:       #999999;
  --color-border:           rgba(0,0,0,0.08);
  --color-border-light:     rgba(0,0,0,0.05);

  /* Semantic overlays */
  --color-overlay-forest:   rgba(26,46,31,0.85);
  --color-overlay-card:     rgba(255,255,255,0.04);
  --color-overlay-border:   rgba(255,255,255,0.08);

  /* Legacy aliases (keep for index.html compat) */
  --cream:            var(--color-cream);
  --warm-white:       var(--color-warm-white);
  --deep-forest:      var(--color-deep-forest);
  --forest:           var(--color-forest);
  --sage:             var(--color-sage);
  --sage-light:       var(--color-sage-light);
  --terracotta:       var(--color-terracotta);
  --terracotta-light: var(--color-terracotta-light);
  --gold:             var(--color-gold);
  --gold-light:       var(--color-gold-light);
  --charcoal:         var(--color-charcoal);
  --dark:             var(--color-dark);
  --mid-gray:         var(--color-mid-gray);
  --light-gray:       var(--color-light-gray);

  /* ─── SPACING — 8pt grid ──────────────────────────────── */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  56px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;
  --space-16: 128px;

  /* Section padding */
  --section-padding-x:        60px;
  --section-padding-y:        120px;
  --section-padding-x-tablet: 28px;
  --section-padding-y-tablet: 80px;
  --section-padding-x-mobile: 20px;
  --section-padding-y-mobile: 64px;

  /* ─── TYPOGRAPHY ──────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Scale */
  --text-2xs:   10px;
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    15px;
  --text-xl:    18px;
  --text-2xl:   24px;
  --text-3xl:   28px;
  --text-4xl:   36px;

  /* Fluid display sizes */
  --text-display-sm:  clamp(28px, 3vw,   42px);
  --text-display-md:  clamp(36px, 4vw,   56px);
  --text-display-lg:  clamp(52px, 5.5vw, 82px);

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.15;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;
  --leading-loose:  1.85;

  /* Letter spacing */
  --tracking-tight:  0.02em;
  --tracking-normal: 0.06em;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.18em;

  /* ─── BORDERS & RADIUS ────────────────────────────────── */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-full:50%;
  --radius-pill:50px;

  --border-thin:   1px solid var(--color-border);
  --border-medium: 1.5px solid var(--color-border);

  /* ─── SHADOWS ─────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.06);
  --shadow-card:  0 4px 16px rgba(0,0,0,0.07);
  --shadow-hover: 0 20px 60px rgba(0,0,0,0.10);
  --shadow-float: 0 4px 20px rgba(37,211,102,0.35);
  --shadow-nav:   0 1px 0 rgba(0,0,0,0.06);

  /* ─── MOTION ──────────────────────────────────────────── */
  --transition:       all 0.3s ease;
  --transition-fast:  all 0.2s ease;
  --transition-slow:  all 0.5s ease;
  --ease-out:         cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
}