/* ============================================
   DESIGN TOKENS — Lily Brand System
   ============================================ */

:root {
  /* Colors */
  --cream: #F5F0EB;
  --warm-black: #1A1714;
  --olive: #6B7B5E;
  --olive-light: #8A9A7A;
  --gold: #C4A265;
  --gold-light: #D4B87A;
  --taupe: #A69585;
  --blush: #E8D5C8;
  --white: #FDFCFA;
  --text-muted: #7A7067;
  --border: rgba(26, 23, 20, 0.08);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  /* Font sizes — fluid, mobile-first (min sizes optimized for mobile readability) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --text-xl: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-hero: clamp(2.5rem, 2rem + 3.5vw, 6rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-section: clamp(5rem, 3.5rem + 5vw, 8rem);

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-padding: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-base: 0.4s var(--ease-out);
  --transition-slow: 0.8s var(--ease-out);

  /* Borders & Shadows */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 20px rgba(26, 23, 20, 0.06);
  --shadow-card-hover: 0 8px 40px rgba(26, 23, 20, 0.1);
}