:root {
  /* ===== BRAND — deep aquatic teal scale (replaces navy→sky-blue) ===== */
  --primary-900: #073B3F;   /* deepest — high-emphasis text on light bg, admin sidebar base */
  --primary-800: #0A4C51;   /* hover state for primary buttons/links */
  --primary-700: #0E5C63;   /* CORE BRAND COLOR — primary buttons, active nav, links, icons */
  --primary-600: #14747C;
  --primary-500: #1C8D95;
  --primary-400: #6BB8BC;   /* light icon strokes on dark backgrounds */
  --primary-100: #EAF4F3;   /* pale tint — section backgrounds, hover washes, input focus ring */

  /* ===== ACCENTS ===== */
  --accent-orange: #E8603C;      /* PRIMARY CTA color — Add to Cart, Buy Now, urgent badges */
  --accent-orange-dark: #C74A29; /* hover state for CTA buttons */
  --accent-cyan: #3E9CA3;        /* secondary/decorative accent — was neon #00f5d4 */
  --accent-green: #2F8F5B;       /* was neon #70e000 — now doubles as --success below */
  --accent-gold: #C98A1A;        /* ratings, "bestseller" badges — use sparingly */

  /* ===== BACKGROUNDS (light theme only — no dark mode) ===== */
  --bg-main: #FAFAF8;   /* page background — warm off-white, not stark white */
  --bg-base: #FAFAF8;
  --bg-card: #FFFFFF;   /* cards/panels pop against the warm page background */
  --bg-dark: #0D2124;   /* footer + admin sidebar ONLY — teal-black, not generic navy */

  /* ===== TEXT ===== */
  --text-primary: #101A1D;
  --text-secondary: #4B5D60;
  --text-muted: #8A9B9D;
  --text-light: #F4FAF9;   /* text on --bg-dark */

  /* ===== BORDERS ===== */
  --border-light: #DEE7E6;
  --border-glass: rgba(255, 255, 255, 0.5);

  /* ===== SEMANTIC (distinct from brand teal so status is unambiguous) ===== */
  --success: #2F8F5B;
  --warning: #C98A1A;
  --danger: #C6362B;

  /* ===== SHADOWS — soft/quiet elevation, NO glow ===== */
  --shadow-sm: 0 1px 2px rgba(13,33,36,0.05), 0 1px 3px rgba(13,33,36,0.04);
  --shadow-md: 0 4px 10px rgba(13,33,36,0.06), 0 8px 24px rgba(13,33,36,0.06);
  --shadow-lg: 0 12px 24px rgba(13,33,36,0.08), 0 20px 48px rgba(13,33,36,0.08);

  /* ===== TYPOGRAPHY ===== */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* prices, dosage numbers, SKUs, admin tables */

  /* ===== SPACING (4px base unit) ===== */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */

  /* ===== RADIUS ===== */
  --radius-sm: 6px;      /* inputs, small controls */
  --radius-md: 10px;     /* admin cards, cart item thumbnails */
  --radius-lg: 16px;     /* product cards, calculator card, modals */
  --radius-full: 12px;   /* buttons, filter chips — WAS 9999px, this is the change that kills the pill look */
  --radius-pill: 9999px; /* reserved ONLY for small badges/tags, never buttons */

  /* ===== MOTION ===== */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}