/* ==========================================================
   KAIETEUR KITCHEN — Brand Tokens
   Source: Brand Bible "Golden Arrowhead Minimalist"
   Update hex values here if Brand Bible is revised.
   ========================================================== */

:root {
  /* ---- Brand Colors ---- */
  --kk-gold:        #C9962A;   /* Burnished Gold — primary, icon, CTAs */
  --kk-gold-light:  #E4AF50;   /* Gold hover / lighter accent */
  --kk-gold-dark:   #9E721A;   /* Gold pressed / deep accent */
  --kk-green:       #1D5C2E;   /* Forest Green — icon grounding */
  --kk-green-light: #2D7A40;   /* Green hover */
  --kk-crimson:     #DC143C;   /* Crimson Red — dot on "i" ONLY */

  /* ---- Neutrals ---- */
  --kk-black:       #080808;   /* True near-black */
  --kk-charcoal:    #111111;   /* Nav/header background */
  --kk-dark:        #1A1A1A;   /* Footer, dark sections */
  --kk-mid:         #3A3A3A;   /* Muted text on light */
  --kk-border:      rgba(29,92,46,0.2);   /* Green border at low opacity */
  --kk-white:       #FFFFFF;
  --kk-cream:       #F9F5EE;   /* Warm off-white — section backgrounds */
  --kk-cream-dark:  #EDE8DF;   /* Card backgrounds */

  /* ---- Semantic ---- */
  --kk-bg:          var(--kk-cream);
  --kk-text:        #1A1A1A;
  --kk-text-muted:  #5A5A5A;
  --kk-text-light:  rgba(255,255,255,0.88);
  --kk-text-dim:    rgba(255,255,255,0.55);

  /* ---- Typography ---- */
  --font-heading:   'Cormorant Garamond', 'Georgia', serif;
  --font-body:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-md:   1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.375rem;   /* 22px */
  --font-size-2xl:  1.75rem;    /* 28px */
  --font-size-3xl:  2.5rem;     /* 40px */
  --font-size-4xl:  3.5rem;     /* 56px */
  --font-size-hero: clamp(2.75rem, 6vw, 5rem);

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

  /* ---- Layout ---- */
  --container-max:  1280px;
  --container-wide: 1440px;
  --nav-height:     88px;
  --nav-height-scrolled: 68px;

  /* ---- Radii ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.18);
  --shadow-gold: 0 4px 20px rgba(201,150,42,0.35);
  --shadow-green: 0 4px 20px rgba(29,92,46,0.35);

  /* ---- Transitions ---- */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap:   cubic-bezier(0.16, 1, 0.3, 1);
  --transition:  0.25s var(--ease);
  --transition-slow: 0.45s var(--ease);

  /* ---- Hero ---- */
  --hero-overlay: linear-gradient(
    to bottom,
    rgba(8, 8, 8, 0.35) 0%,
    rgba(8, 8, 8, 0.50) 60%,
    rgba(8, 8, 8, 0.75) 100%
  );
  --hero-height: 100svh;
  --hero-height-min: 600px;
}