/*
 * EPOH Design Tokens — variables.css
 * Single source of truth for all colour, type, spacing, and layout values.
 * Source: EPOH_STYLE_ANCHOR.md
 *
 * Load order: 2nd (after reset.css)
 */

:root {

  /* ============================================================
     COLOUR PALETTE
     ============================================================ */

  /* --- Primary Dark Scale --- */
  --color-void:        #0F1117;   /* Near-black. Hero bg, deep section bg, footer bg. */
  --color-obsidian:    #1C1F2A;   /* Dark navy-black. Primary dark bg, scrolled header. */
  --color-midnight:    #252A3A;   /* Mid-dark navy. Card backgrounds, section--card. */

  /* --- Accent: The EPOH Ember --- */
  --color-ember:       #C4622D;   /* Warm terracotta-sienna. CTAs, phase labels, active nav. */
  --color-ember-light: #D9784A;   /* Lighter ember. Hover states on ember elements. */
  --color-ember-muted: rgba(196, 98, 45, 0.12); /* Tinted background behind ember elements. */

  /* --- Secondary Accent: Gold --- */
  --color-gold:        #B8935A;   /* Muted gold. Phase markers, Ayurvedic labels, pull quote borders. */
  --color-gold-light:  #D4AE7A;   /* Lighter gold. Text on dark for Ayurvedic accents. */

  /* --- Healing Greens (restrained) --- */
  --color-sage:        #4A6741;   /* Deep forest sage. Positive markers, Phase 2, "healing" signals. */
  --color-sage-light:  #6B8F62;   /* Mid sage. Icons, subtle accents, Hurley Stage I badge. */

  /* --- Phase-Specific Accents --- */
  --color-phase-1:     #C4622D;   /* L — Lowering Load: ember */
  --color-phase-2:     #4A6741;   /* I — Internal Healing: sage */
  --color-phase-3:     #B8935A;   /* F — Functional Detox: gold */
  --color-phase-4:     #5A7A8A;   /* E — External Care: cool slate */
  --color-phase-5:     #7A5A8A;   /* S — Sustaining: muted violet */

  /* --- Neutral System --- */
  --color-parchment:   #F4F0E8;   /* Warm off-white. Light section bg, primary text on dark. */
  --color-linen:       #E8E2D8;   /* Slightly darker warm white. Borders on light sections. */
  --color-stone:       #9A9080;   /* Warm mid-grey. Secondary text on light bg. */
  --color-ash:         #6B6560;   /* Darker warm grey. Captions, meta, footnotes. */

  /* --- Semantic Colour Assignments --- */
  --color-text-primary:      #F4F0E8;  /* Primary text on dark backgrounds */
  --color-text-secondary:    #B8B0A4;  /* Secondary / subdued text on dark */
  --color-text-on-light:     #1C1F2A;  /* Primary text on light/parchment backgrounds */
  --color-text-muted-light:  #6B6560;  /* Secondary text on light backgrounds */

  --color-bg-dark:    var(--color-obsidian);
  --color-bg-darker:  var(--color-void);
  --color-bg-light:   var(--color-parchment);
  --color-bg-card:    var(--color-midnight);

  --color-border-dark:   rgba(255, 255, 255, 0.08);  /* Barely-visible rule on dark bg */
  --color-border-light:  var(--color-linen);           /* Border on parchment bg */

  --color-cta:        var(--color-ember);
  --color-cta-hover:  var(--color-ember-light);


  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Font Families */
  --font-display: 'Playfair Display', 'Georgia', serif;
  /* Authority of a medical journal with warmth of a personal narrative */

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Clean, readable, medical — consistent with reference site */

  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  /* Phase labels, clinical data — signals precision */

  --font-accent: 'Cormorant Garamond', 'Garamond', serif;
  /* Ayurvedic concept labels, pull quotes — elegant, slightly classical */

  /* Type Scale — Fluid (clamp) for display, fixed for body */
  --font-size-hero:    clamp(2.5rem, 5vw, 4.5rem);    /* Hero H1 */
  --font-size-h1:      clamp(2rem, 4vw, 3.25rem);     /* Page H1 */
  --font-size-h2:      clamp(1.6rem, 3vw, 2.5rem);    /* Section headings */
  --font-size-h3:      clamp(1.2rem, 2vw, 1.75rem);   /* Card titles, sub-sections */
  --font-size-h4:      1.125rem;                       /* Labels, card headers */

  --font-size-body-lg: 1.125rem;   /* 18px — long-form article text */
  --font-size-body:    1rem;       /* 16px — standard body */
  --font-size-small:   0.875rem;   /* 14px — meta, captions */
  --font-size-xs:      0.75rem;    /* 12px — legal, footnotes */
  --font-size-phase:   0.6875rem;  /* 11px — PHASE 01 label, all-caps mono */

  /* Line Heights */
  --line-height-tight:   1.15;
  --line-height-heading: 1.25;
  --line-height-body:    1.75;
  --line-height-loose:   1.9;

  /* Letter Spacing */
  --tracking-tight:    -0.03em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-widest:    0.15em;   /* ALL-CAPS labels */

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


  /* ============================================================
     SPACING SYSTEM
     Base unit: 8px (0.5rem)
     ============================================================ */

  --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 */

  /* Section Padding */
  --section-padding-desktop: clamp(4rem, 8vw, 7rem);
  --section-padding-mobile:  3rem;


  /* ============================================================
     LAYOUT
     ============================================================ */

  /* Container Widths */
  --container-max:    1320px;   /* Full site container */
  --container-wide:   1080px;   /* Wide content areas */
  --container-prose:  720px;    /* Article / reading content */
  --container-narrow: 600px;    /* CTAs, narrow sections */

  /* Responsive Breakpoints (reference only — use in @media) */
  --bp-xs:  480px;
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;


  /* ============================================================
     INTERACTION & ANIMATION
     ============================================================ */

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   450ms ease;
  --transition-reveal: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Border Radius (near-flat — clinical, not playful) */
  --radius-subtle: 2px;
  --radius-small:  4px;
  --radius-medium: 8px;


  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */

  --z-base:   0;
  --z-above:  10;
  --z-sticky: 100;
  --z-modal:  200;
  --z-toast:  300;


  /* ============================================================
     ACCESSIBILITY
     ============================================================ */

  --focus-ring-color:  var(--color-ember);
  --focus-ring-width:  2px;
  --focus-ring-offset: 3px;

  /* WhatsApp */
  --color-whatsapp:       #25D366;
  --color-whatsapp-hover: #20BA5A;
}


/* ============================================================
   RESPONSIVE TOKEN OVERRIDES
   ============================================================ */

/* Tablet: 768px – 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --font-size-hero: clamp(2.25rem, 4vw, 3.5rem);
    --font-size-h1:   clamp(1.75rem, 3.5vw, 2.75rem);
    --font-size-h2:   clamp(1.4rem, 2.5vw, 2rem);
    --font-size-h3:   clamp(1.1rem, 1.8vw, 1.5rem);
  }
}

/* Mobile: below 768px */
@media (max-width: 767px) {
  :root {
    --font-size-hero:    clamp(2rem, 7vw, 2.75rem);
    --font-size-h1:      clamp(1.75rem, 6vw, 2.25rem);
    --font-size-h2:      clamp(1.4rem, 5vw, 1.875rem);
    --font-size-h3:      clamp(1.1rem, 4vw, 1.375rem);
    --font-size-body-lg: 1.0625rem;  /* 17px on mobile */

    --section-padding-desktop: var(--section-padding-mobile);
  }
}

/* Small mobile: below 480px */
@media (max-width: 479px) {
  :root {
    --font-size-hero: 2rem;
    --font-size-h1:   1.75rem;
    --font-size-h2:   1.4rem;
  }
}