/* ==========================================================================
   Design tokens — the single palette/type/spacing source for the whole site.
   Every other stylesheet reads these custom properties; nothing hard-codes
   a hex value, font size or spacing number outside this file.
   ========================================================================== */

:root {
  /* Brand — anchored to the reference site's mint-teal identity */
  --mint: #01D7A6;
  --mint-600: #00B98D;
  --mint-700: #009375;
  --mint-050: #E8FBF5;
  --mint-100: #C7F5E8;

  /* Ink */
  --ink: #0C1F29;
  --ink-700: #24404C;
  --ink-500: #5A7280;
  --ink-400: #8299A4;

  /* Surfaces */
  --white: #FFFFFF;
  --surface: #F6FAFB;
  --surface-2: #EDF3F5;
  --line: #DFE9ED;

  /* Support */
  --amber: #FFB020;
  --amber-050: #FFF6E5;
  --red: #E5484D;
  --red-050: #FEECEC;
  --green: #2E9E5B;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(12,31,41,.06), 0 1px 3px rgba(12,31,41,.04);
  --shadow-md: 0 4px 12px rgba(12,31,41,.07), 0 2px 4px rgba(12,31,41,.04);
  --shadow-lg: 0 18px 40px rgba(12,31,41,.10), 0 4px 12px rgba(12,31,41,.05);
  --shadow-mint: 0 8px 24px rgba(1,215,166,.28);

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.25rem + 1.7vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-price: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  /* Spacing */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;  --sp-5: 1.5rem;
  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;   --sp-9: 6rem;  --sp-10: 8rem;

  /* Radii */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 720px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 350ms;

  /* Header height — referenced by sticky offsets (live price panel, category nav) */
  --header-h: 80px;

  /* z-index scale — every stacking value in the codebase must use one of
     these tokens. No stray numeric z-index values anywhere (grep to check). */
  --z-base: 1;
  --z-raised: 10;         /* hover-lifted cards */
  --z-sticky-rail: 100;   /* desktop price panel, sticky category/TOC nav */
  --z-dropdown: 900;      /* custom selects, nav mega-menu */
  --z-header: 1000;       /* sticky site header */
  --z-price-bar: 1100;    /* mobile fixed price bar */
  --z-autocomplete: 1500; /* Google .pac-container */
  --z-overlay: 2000;      /* mobile nav backdrop, modal/lightbox backdrop */
  --z-modal: 2100;
  --z-toast: 2200;
  --z-cookie: 2300;
}