/* =========================================
   SYNTARYFORM — Design Tokens
   ========================================= */

:root {
  /* ---- Colors ---- */
  --clr-dark:         #1C1007;
  --clr-brown:        #3D2314;
  --clr-brown-lt:     #5A3A2A;
  --clr-terra:        #C4622D;
  --clr-terra-lt:     #E08A5A;
  --clr-terra-dk:     #A04E1F;
  --clr-beige:        #F5ECD7;
  --clr-beige-dk:     #E8D9C0;
  --clr-white:        #FDFAF5;
  --clr-text:         #2A1A0E;
  --clr-text-muted:   #7A6A5A;
  --clr-overlay:      rgba(28, 16, 7, 0.55);
  --clr-overlay-dark: rgba(28, 16, 7, 0.8);
  --clr-glass:        rgba(245, 236, 215, 0.06);
  --clr-glass-border: rgba(245, 236, 215, 0.12);
  --clr-success:      #4CAF50;
  --clr-whatsapp:     #25D366;

  /* ---- Fonts ---- */
  --ff-heading: 'Cormorant Garamond', 'Georgia', serif;
  --ff-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* ---- Font Sizes (fluid) ---- */
  --fs-display: clamp(3.2rem, 8vw, 7.5rem);
  --fs-h1:      clamp(2.2rem, 5vw, 4rem);
  --fs-h2:      clamp(1.6rem, 3.5vw, 2.8rem);
  --fs-h3:      clamp(1.15rem, 2vw, 1.5rem);
  --fs-body:    clamp(0.95rem, 1.1vw, 1.1rem);
  --fs-small:   clamp(0.8rem, 0.9vw, 0.9rem);
  --fs-nav:     0.85rem;
  --fs-btn:     0.9rem;

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

  /* ---- Spacing ---- */
  --sp-2xs: 0.25rem;
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  2rem;
  --sp-lg:  4rem;
  --sp-xl:  6rem;
  --sp-2xl: 10rem;

  /* ---- Layout ---- */
  --max-width:  1400px;
  --nav-height: 80px;

  /* ---- Border Radius ---- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 3px rgba(28, 16, 7, 0.04);
  --shadow-sm:  0 2px 8px rgba(28, 16, 7, 0.08);
  --shadow-md:  0 4px 20px rgba(28, 16, 7, 0.12);
  --shadow-lg:  0 8px 40px rgba(28, 16, 7, 0.16);
  --shadow-xl:  0 16px 64px rgba(28, 16, 7, 0.24);
  --shadow-glow: 0 0 40px rgba(196, 98, 45, 0.2);

  /* ---- Transitions ---- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   200ms;
  --duration-normal: 400ms;
  --duration-slow:   800ms;
  --duration-xslow:  1200ms;

  /* ---- Z-index Scale ---- */
  --z-behind:  -1;
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-modal:   1000;
  --z-tooltip: 1100;
  --z-toast:   1200;
}