/* ============================================================
   API Trentine — Design tokens
   ============================================================ */

:root {
  --primary:     #CFA767; /* main brand color */
  --primary-dark:#B08A4D; /* darker shade of primary for hovers */
  --secondary:   #41542C; /* secondary brand color */
  --secondary-dark:#2F3D20; /* darker shade of secondary for hovers */
  --honey:       #e8a020;
  --honey-light: #f5c842;
  --honey-dark:  #c47d0a;
  --amber:       #7c4a00;
  --cream:       #fafaf8;
  --beige:       #f3ede3;
  --text:        #1a1a1a;
  --text-muted:  #6b6b6b;
  --white:       #ffffff;
  --border:      #e8e0d4;
  --radius:      12px;
  --radius-lg:   20px;
  --shadow:      0 2px 16px rgba(0,0,0,.07);
  --shadow-md:   0 8px 32px rgba(0,0,0,.10);
  --transition:  .2s ease;
  --font-body:   'Figtree', system-ui, sans-serif;
  --font-head:   'Figtree', system-ui, sans-serif;

  /* spacing scale */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --section-y: clamp(56px, 8vw, 96px); /* fluid vertical section padding */

  /* z-index scale */
  --z-base: 1;
  --z-nav: 100;
  --z-overlay: 200;
  --z-lightbox: 999;

  /* transition timings */
  --transition-slow: .4s ease;

  /* breakpoints (reference — media queries can't read custom props): 480 / 720 / 960 / 1200 */
}