/* ============================================================
   THE HEARTSPACE — Design Tokens (variables.css)
   ------------------------------------------------------------
   A single source of truth for colour, type, spacing & motion.
   Palette is a fresh, clean "Teal & Coral" scheme — crisp white
   canvas, a calm deep teal-green for brand/dark UI, and a warm
   coral accent for energy. Inspired by clean modern wellness
   references. Every other stylesheet references these variables
   only, so re-theming the whole site means editing this one file.

   Note: the CSS custom properties are named --green-* (brand) and
   --coral-* (accent). A few legacy class names (.btn--gold, .gold)
   simply map onto the coral accent — the colour is coral.
   ============================================================ */

:root {
  /* ---- Brand: Teal-Green (calm, trust — dark UI, buttons, deep bands) ---- */
  --green-900: #0a352e; /* deepest — footer, hero overlays        */
  --green-800: #0d4238; /* deep surfaces / dark bands             */
  --green-700: #116152; /* PRIMARY brand — buttons, headings      */
  --green-600: #16745f; /* hover / raised                         */
  --green-500: #2a917b; /* mid tone                               */
  --green-300: #8dc4b7; /* soft green                             */
  --green-100: #dcefe9; /* faint green tint background            */

  /* ---- Accent: Coral (warm energy, highlight) ---- */
  --coral-600: #cc5334; /* deep coral — accent text on light      */
  --coral-500: #e26847; /* coral                                  */
  --coral-400: #ef7f5a; /* PRIMARY accent                         */
  --coral-300: #f6a888; /* light coral                            */
  --coral-100: #fce5db; /* faint coral tint                       */

  /* ---- Crisp neutrals (the airy "breathing room") ---- */
  --ivory:     #f4f8f6; /* page background — soft mint-white       */
  --cream:     #ffffff; /* cards / raised surfaces (crisp white)   */
  --sand:      #e7f0ec; /* subtle green-grey fills                 */
  --line:      #e0eae5; /* hairline borders                        */
  --ink:       #16261f; /* primary text — deep green-charcoal      */
  --ink-soft:  #59685f; /* secondary / muted text — green-grey     */
  --white:     #ffffff;

  /* ---- Status (used sparingly for pills & alerts) ---- */
  --status-in:   #2f8a5f; /* in stock / success                  */
  --status-low:  #c07a2c; /* low stock / warning                 */
  --status-out:  #c0533a; /* out of stock / error                */

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.35rem);
  --step-3:  clamp(2.1rem, 1.75rem + 1.75vw, 3.4rem);
  --step-4:  clamp(2.6rem, 2rem + 3vw, 4.75rem);
  --step-5:  clamp(3.2rem, 2.3rem + 4.5vw, 6.5rem);

  /* ---- Spacing scale (8pt-ish rhythm) ---- */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---- Layout ---- */
  --content-max: 1200px;   /* standard content width  */
  --wide-max:    1440px;   /* full-bleed sections     */
  --gutter:      clamp(1.25rem, 5vw, 4rem);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, diffuse — never harsh; green-tinted) ---- */
  --shadow-sm: 0 2px 8px rgba(10, 53, 46, 0.05);
  --shadow-md: 0 14px 34px -14px rgba(10, 53, 46, 0.14);
  --shadow-lg: 0 30px 70px -28px rgba(10, 53, 46, 0.20);
  --shadow-gold: 0 16px 40px -16px rgba(239, 127, 90, 0.38);

  /* ---- Motion (gentle, intentional) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  /* ---- Z-index scale ---- */
  --z-hero-canvas: 0;
  --z-content: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}