/* ══════════════════════════════════════════════════════════════
   SPOTS DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Color Palette (5 Core Tokens + Utilities) */
  --color-espresso: #1C1410;       /* espresso-dark (not pure black) */
  --color-cream: #FBF7F0;          /* proofed-dough cream */
  --color-gold: #B8823D;           /* caramelized-sugar gold */
  --color-pistachio: #2D5C4A;      /* deep pistachio (success/stock states) */
  --color-cocoa: #8B6F5C;          /* muted cocoa (secondary texts) */

  /* Neutral Utility Tints */
  --color-cream-mid: #FAF3E6;      /* Slightly darker cream for alternate section backgrounds */
  --color-cream-dark: #EADEC7;     /* Soft borders and dividers on light backgrounds */
  --color-espresso-light: #2A201A; /* Cards/subtle backgrounds in dark sections */
  --color-espresso-border: #3A2F28;/* Soft borders on dark backgrounds */
  --color-white: #FFFFFF;

  /* Typography Font Families */
  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Typography Font Sizes (Fluid Scale using clamp) */
  --size-xs: clamp(0.7rem, 1.5vw, 0.75rem);
  --size-sm: clamp(0.8rem, 2vw, 0.875rem);
  --size-base: clamp(0.95rem, 2.5vw, 1rem);
  --size-lg: clamp(1.1rem, 3vw, 1.25rem);
  --size-h3: clamp(1.35rem, 4vw, 1.65rem);
  --size-h2: clamp(1.8rem, 5vw, 2.5rem);
  --size-h1: clamp(2.4rem, 6vw, 3.8rem);

  /* Spacing Scale (4px/8px Baseline Grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Borders & Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* Shadows (Subtle & Soft) */
  --shadow-sm: 0 2px 8px rgba(28, 20, 16, 0.04);
  --shadow-md: 0 8px 24px rgba(28, 20, 16, 0.08);
  --shadow-lg: 0 16px 48px rgba(28, 20, 16, 0.12);
  --shadow-inset: inset 0 1px 3px rgba(28, 20, 16, 0.05);

  /* Interactive Transitions */
  --transition-fast: 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Layout Scaffolding Config */
  --container-max-width: 1200px;
  --container-padding: clamp(1.25rem, 5vw, 2.5rem);
}