/* ─── Pro Wellness — Design Tokens ─────────────────────────────────────────
   Single source of truth for ALL visual values.
   Never hardcode colors, sizes, or spacing anywhere else.
   ────────────────────────────────────────────────────────────────────────── */

/* Site-wide fonts — Manrope + Inter */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {

  /* ════════════════════════════════════════════════════════════════════════
     BRAND COLOURS — core palette from logo
     ════════════════════════════════════════════════════════════════════════ */

  /* ── Primary: dark forest green ─────────────────────────────────────── */
  --color-green: #344F44;
  /* headings, primary CTA, accents  */
  --color-green-mid: #4A6B5C;
  /* hover states, icon fills        */
  --color-green-soft: #6A8C7E;
  /* secondary text, muted elements  */
  --color-green-pale: #C4D4CC;
  /* borders, dividers               */
  --color-green-tint: #EAF0EC;
  /* card backgrounds, hover bg      */
  --color-green-wash: #F2F5F3;
  /* subtle section tint             */

  /* ── Secondary: sand / warm gold ────────────────────────────────────── */
  --color-sand: #A57425;
  /* highlights, badges, accent CTA  */
  --color-sand-dark: #7C5F32;
  /* deep sand — links, bold text    */
  --color-sand-mid: #C49545;
  /* hover on sand elements          */
  --color-sand-pale: #E5CFA0;
  /* borders, decorative lines       */
  --color-sand-tint: #F4EAD5;
  /* badge backgrounds, warm cards   */
  --color-sand-wash: #FAF5EC;
  /* warm card bg, quote blocks      */

  /* ── Backgrounds ─────────────────────────────────────────────────────── */
  --color-bg-warm: #FAFAF1;
  /* page root background            */
  --color-bg-soft: #F8F7EE;
  /* alternate section bg            */
  --color-bg-card: #FFFFFF;
  /* card surface                    */
  --color-bg-muted: #E1E4DB;
  /* dividers, skeleton loaders      */

  /* ── Text ────────────────────────────────────────────────────────────── */
  --color-text-heading: #1E2D27;
  /* h1–h3, strong emphasis          */
  --color-text-body: #3D4D45;
  /* main body copy                  */
  --color-text-muted: #6E7D74;
  /* sub-copy, captions, labels      */
  --color-text-placeholder: #9DAD9E;
  /* input placeholders              */
  --color-text-on-green: #FFFFFF;
  /* text on dark green bg           */
  --color-text-on-sand: #FFFFFF;
  /* text on sand bg                 */
  --color-text-link: #344F44;
  /* inline links                    */
  --color-text-link-hover: #4A6B5C;

  /* ── Feedback ────────────────────────────────────────────────────────── */
  --color-success: #3B7A57;
  --color-success-tint: #E6F2EC;
  --color-warning: #A57425;
  --color-warning-tint: #F4EAD5;
  --color-error: #B54D4D;
  --color-error-tint: #F9ECEC;

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --color-border: #DDE0D9;
  /* default card / input borders    */
  --color-border-strong: #C4CAC0;
  /* dividers, table lines           */
  --color-border-focus: #344F44;
  /* focused inputs                  */


  /* ════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ════════════════════════════════════════════════════════════════════════ */

  /* Heading font — strong, modern sans-serif */
  --font-heading: 'Manrope', 'Inter', system-ui, sans-serif;

  /* Body / UI font — clean, legible, neutral */
  --font-body: 'Inter', system-ui, sans-serif;

  /* ── Scale (fluid-friendly rem values) ──────────────────────────────── */
  --text-xs: 0.6875rem;
  /* 11px — micro labels, timestamps         */
  --text-sm: 0.8125rem;
  /* 13px — captions, form hints             */
  --text-base: 1rem;
  /* 16px — default body                     */
  --text-md: 1.0625rem;
  /* 17px — comfortable long-read body       */
  --text-lg: 1.1875rem;
  /* 19px — lead paragraphs                  */
  --text-xl: 1.375rem;
  /* 22px — large UI labels, card titles     */
  --text-2xl: 1.625rem;
  /* 26px — h4 equivalent                    */
  --text-3xl: 2rem;
  /* 32px — section headings (h3)            */
  --text-4xl: 2.5rem;
  /* 40px — page section title (h2)          */
  --text-5xl: 3.25rem;
  /* 52px — hero headline (h1 desktop)       */
  --text-hero: 3.75rem;
  /* 60px — hero headline (wide screen)      */

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

  /* ── Line heights ────────────────────────────────────────────────────── */
  --leading-tight: 1.15;
  /* headings                               */
  --leading-snug: 1.3;
  /* subheadings, card titles               */
  --leading-normal: 1.55;
  /* body paragraphs                        */
  --leading-relaxed: 1.75;
  /* long-form / lead text                  */

  /* ── Letter spacing ──────────────────────────────────────────────────── */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.1em;


  /* ════════════════════════════════════════════════════════════════════════
     SPACING — 4px base grid
     ════════════════════════════════════════════════════════════════════════ */

  --space-1: 0.25rem;
  /*  4px */
  --space-2: 0.5rem;
  /*  8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-8: 2rem;
  /* 32px */
  --space-10: 2.5rem;
  /* 40px */
  --space-12: 3rem;
  /* 48px */
  --space-16: 4rem;
  /* 64px */
  --space-20: 5rem;
  /* 80px */
  --space-24: 6rem;
  /* 96px */
  --space-32: 8rem;
  /* 128px */

  /* Semantic spacing aliases */
  --space-xs: var(--space-2);
  --space-sm: var(--space-4);
  --space-md: var(--space-6);
  --space-lg: var(--space-10);
  --space-xl: var(--space-16);
  --space-section: var(--space-20);
  /* padding-block on full sections */
  --space-inner: var(--space-8);
  /* card inner padding             */
  --space-gap: var(--space-6);
  /* grid/flex gaps                 */


  /* ════════════════════════════════════════════════════════════════════════
     LAYOUT
     ════════════════════════════════════════════════════════════════════════ */

  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 720px;
  --container-prose: 660px;


  /* ════════════════════════════════════════════════════════════════════════
     SHAPE & DEPTH
     ════════════════════════════════════════════════════════════════════════ */

  /* ── Border radius ───────────────────────────────────────────────────── */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows (warm-tinted, not cool grey) ────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(52, 79, 68, 0.06);
  --shadow-sm: 0 2px 8px rgba(52, 79, 68, 0.08);
  --shadow-md: 0 6px 20px rgba(52, 79, 68, 0.10);
  --shadow-lg: 0 12px 40px rgba(52, 79, 68, 0.13);
  --shadow-focus: 0 0 0 3px rgba(52, 79, 68, 0.20);

  /* ── Border ──────────────────────────────────────────────────────────── */
  --border: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);


  /* ════════════════════════════════════════════════════════════════════════
     MOTION
     ════════════════════════════════════════════════════════════════════════ */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);


  /* ════════════════════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ════════════════════════════════════════════════════════════════════════ */

  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}