/* ============================================================
   BBN CATERERS — DESIGN TOKENS / CSS VARIABLES
   Brand: Champagne Cream × Warm Taupe × Stone Beige
   Exact Brand Colors from Brand Identity Document
   ============================================================ */

:root {
  /* ─── EXACT Brand Colors ─── */
  --color-taupe:          #89785C;   /* Warm Taupe — primary brand color */
  --color-taupe-light:    #A09480;   /* Lighter taupe */
  --color-taupe-dark:     #6B5E47;   /* Deeper taupe */
  --color-beige:          #B8AD9B;   /* Stone Beige — secondary */
  --color-beige-light:    #D0C8BB;   /* Light stone beige */
  --color-cream:          #F3EFE8;   /* Champagne Cream — background */
  --color-cream-light:    #FDFCFA;   /* Near-white cream */
  --color-cream-mid:      #EDE9E0;   /* Mid cream */
  --color-cream-dark:     #E5DFD3;   /* Deeper cream */

  /* ─── Supporting Neutrals ─── */
  --color-dark:           #1C1A17;   /* Near-black warm dark */
  --color-dark-mid:       #2E2B26;   /* Dark warm mid */
  --color-text:           #3A3630;   /* Body text — warm dark */
  --color-text-muted:     #7A7369;   /* Muted warm grey */
  --color-text-light:     #A09480;   /* Light warm text */
  --color-white:          #FFFFFF;
  --color-border:         rgba(137, 120, 92, 0.20); /* Taupe border */
  --color-border-light:   rgba(184, 173, 155, 0.25);

  /* ─── Gradients ─── */
  --gradient-hero:        linear-gradient(160deg, rgba(28,26,23,0.88) 0%, rgba(46,43,38,0.80) 50%, rgba(137,120,92,0.25) 100%);
  --gradient-taupe:       linear-gradient(135deg, #89785C 0%, #A09480 50%, #6B5E47 100%);
  --gradient-cream:       linear-gradient(180deg, #FDFCFA 0%, #F3EFE8 100%);
  --gradient-cream-rev:   linear-gradient(180deg, #F3EFE8 0%, #EDE9E0 100%);
  --gradient-dark:        linear-gradient(145deg, #1C1A17 0%, #2E2B26 100%);
  --gradient-card:        linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(243,239,232,0.70) 100%);
  --gradient-taupe-soft:  linear-gradient(135deg, rgba(137,120,92,0.08) 0%, rgba(184,173,155,0.12) 100%);
  --gradient-section-alt: linear-gradient(180deg, #EDE9E0 0%, #F3EFE8 100%);

  /* ─── Typography ─── */
  --font-heading:         'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:            'Jost', 'Inter', system-ui, -apple-system, sans-serif;
  --font-accent:          'Cormorant Garamond', Georgia, serif;

  /* ─── Font Scale ─── */
  --text-xs:    0.70rem;    /*  11px */
  --text-sm:    0.8125rem;  /*  13px */
  --text-base:  1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.25rem;    /*  20px */
  --text-2xl:   1.5rem;     /*  24px */
  --text-3xl:   1.875rem;   /*  30px */
  --text-4xl:   2.25rem;    /*  36px */
  --text-5xl:   3rem;       /*  48px */
  --text-6xl:   3.75rem;    /*  60px */
  --text-7xl:   4.5rem;     /*  72px */
  --text-8xl:   6rem;       /*  96px */

  /* ─── Font Weights ─── */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ─── Spacing ─── */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* ─── Border Radius ─── */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-2xl: 32px;
  --radius-full:9999px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 2px 10px rgba(137,120,92,0.08);
  --shadow-md:  0 8px 32px rgba(137,120,92,0.12);
  --shadow-lg:  0 16px 48px rgba(137,120,92,0.16);
  --shadow-xl:  0 24px 72px rgba(137,120,92,0.20);
  --shadow-taupe:0 8px 32px rgba(137,120,92,0.22);
  --shadow-card: 0 4px 24px rgba(58,54,48,0.08), 0 1px 4px rgba(58,54,48,0.04);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,0.6);

  /* ─── Transitions ─── */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Layout ─── */
  --container-max:     1300px;
  --container-narrow:  860px;
  --nav-height:        120px;
  --section-padding-y: var(--space-24);
}