/* ============================================================================
   tokens.css — Lusso design tokens (EDIT BRAND HERE).
   Warm walnut / stone palette. No cool-toned neutrals anywhere.
   Everything else in the site references these variables.
   ============================================================================ */

:root {
  /* ---- Brand palette (warm) -------------------------------------------- */
  --color-primary:       #1C1917;  /* near-black walnut  */
  --color-on-primary:    #FFFFFF;
  --color-secondary:     #44403C;  /* warm stone-brown   */
  --color-accent:        #A16207;  /* muted gold         */
  --color-accent-soft:   #C4922B;  /* lighter gold hover */
  --color-background:    #FAFAF9;  /* warm off-white     */
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F5F3F0;  /* warm panel         */
  --color-foreground:    #0C0A09;  /* text               */
  --color-muted:         #E7E5E4;  /* warm stone (was cool #E8ECF0) */
  --color-muted-fg:      #78716C;  /* muted text         */
  --color-border:        #D6D3D1;  /* warm border        */
  --color-danger:        #DC2626;
  --color-success:       #15803D;

  /* Wood-grain accent gradient used for texture backdrops */
  --wood-gradient: linear-gradient(135deg, #2A211B 0%, #3D2E22 45%, #5A4433 100%);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero:   clamp(2.6rem, 6vw, 5rem);
  --fs-h1:     clamp(2rem, 4.5vw, 3.5rem);
  --fs-h2:     clamp(1.6rem, 3.2vw, 2.5rem);
  --fs-h3:     clamp(1.25rem, 2vw, 1.6rem);
  --fs-body:   1.0625rem;   /* ~17px */
  --fs-small:  0.875rem;

  --lh-tight:  1.15;
  --lh-body:   1.65;

  /* ---- Spacing scale (marketing-generous) ------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radius / shadow / motion --------------------------------------- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 3px rgba(28,25,23,.08);
  --shadow:    0 8px 30px rgba(28,25,23,.10);
  --shadow-lg: 0 24px 60px rgba(28,25,23,.18);

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-fast: 180ms;
  --dur:      280ms;
  --dur-slow: 480ms;

  --container: 1200px;
  --nav-h: 76px;
}