/**
 * Safari Herbs — Global Design Tokens
 
 */

:root {
  /* Brand greens */
  --green-primary: #107f26;
  --green-bright: #0a9e14;
  --green-dark: #045a0a;
  --green-deep: #023306;
  --green-muted: rgba(6, 124, 14, 0.15);
  --green-glow: rgba(6, 124, 14, 0.35);

  /* Earth & accent palette */
  --clay: #a3a208;
  --clay-light: #b8845f;
  --amber: #a3a208;
  --amber-soft: #a3a208;
  --cream: #f5f0e6;
  --cream-dark: #e8e0d0;
  --cream-warm: #ebe4d4;
  --about-why-bg: #f8faf8;
  --about-cert-bg: #d4c4a8;
  --charcoal: #1a1f16;
  --charcoal-soft: #2d3528;
  --ink: #0f1410;
  --white: #faf8f4;

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lora", "Palatino Linotype", serif;
  --font-accent: "DM Sans", system-ui, sans-serif;
  --font-nav: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Nav glass panels (Integrated Bio–inspired split bar) */
  --nav-glass-bg: rgb(255, 255, 255);
  --nav-glass-bg-solid: #ffffff;
  --nav-glass-shadow: none;
  --nav-glass-blur: 12px;
  --nav-cta-bg: var(--green-primary);
  --btn-hover: #a3a208;
  --nav-cta-bg-hover: var(--btn-hover);

  /* Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-hero: clamp(2.75rem, 2rem + 4vw, 5.5rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 10rem;

  /* Layout */
  --container-narrow: 42rem;
  --container: 72rem;
  --container-wide: 90rem;
  --nav-offset: 5.5rem;
  --hero-safe-top: calc(var(--nav-offset) + 1.5rem);
  --nav-bar-height: 4.85rem;
  --nav-logo-height: 2.75rem;
  --nav-logo-scale: 1.84;
  --nav-logo-slot-width: 7rem;
  --nav-mobile-bar-height: 4rem;
  --nav-link-size: clamp(0.8125rem, 0.72rem + 0.38vw, 1rem);
  --nav-cta-size: clamp(0.8125rem, 0.72rem + 0.35vw, 1rem);
  --nav-glass-radius: 0.875rem;
  --nav-cta-radius: 0.625rem;
  --nav-brand-pad-y: 0.55rem;
  --nav-brand-pad-x: clamp(0.85rem, 2vw, 1.15rem);
  --nav-menu-pad-y: 0.25rem;
  --nav-menu-pad-x: clamp(0.85rem, 2vw, 1.25rem);
  --nav-menu-gap: clamp(1rem, 2.5vw, 2rem);

  /* Effects */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1.25rem;
  --image-radius: clamp(0.5rem, 0.35rem + 0.45vw, 0.875rem);
  --radius-pill: 999px;
  --shadow-soft: 0 8px 32px rgba(15, 20, 16, 0.12);
  --shadow-deep: 0 24px 64px rgba(15, 20, 16, 0.25);
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  --mesh-light: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(212, 160, 23, 0.12), transparent 50%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(6, 124, 14, 0.18), transparent 55%),
    linear-gradient(165deg, var(--cream) 0%, var(--cream-dark) 100%);
  --mesh-dark: radial-gradient(ellipse 60% 50% at 10% 20%, rgba(6, 124, 14, 0.25), transparent 50%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(212, 160, 23, 0.08), transparent 45%),
    linear-gradient(180deg, var(--green-deep) 0%, var(--charcoal) 100%);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.2s;
  --duration: 0.45s;
  --duration-slow: 0.85s;
}