/* ═══════════════════════════════════════════════════════════════════════════
   Jeddy Wellness — Design Tokens
   Brand colors receive DEFAULT values here and are overridden by the inline
   theme block head.php emits from config/theme.php ($THEME_PRESETS).
   Components must only ever reference tokens — never raw hex.

   Contrast notes (verified against WCAG AA):
   - --color-accent (#FD703C) carries white at only 2.8:1 → NEVER white text
     on orange. Buttons use --color-primary-deep text on accent (5.3:1 ✓).
   - --color-accent-text (#C74A15) is the small-text-safe orange on paper.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand colors (defaults = 'jeddy' preset) ──────────────────────── */
    --color-primary:      #005D9E;   /* dark blue */
    --color-primary-dark: #00446F;
    --color-primary-deep: #16293F;   /* near-ink blue — dark bands, CTA text */
    --color-primary-soft: #EAF1F7;
    --color-steel:        #A0BCD1;   /* light blue — borders, chips, decorative */
    --color-accent:       #FD703C;   /* brand orange — chips, rules, gradients */
    --color-accent-light: #FE8A5D;   /* headline gradient top edge */

    /* ── CTA button fill ───────────────────────────────────────────────────
       Deliberately deeper than the brand orange. White on #FD703C is 2.78:1
       and fails WCAG AA (needs 4.5:1); on #CC4610 it is 4.72:1 and passes.
       Decision: keep the conventional white label and deepen the fill, rather
       than ship a CTA that fails an accessibility audit — Jeddy Wellness sells
       into public-sector buyers who apply those checks.
       Brand #FD703C is untouched everywhere it is not a button surface. */
    --color-cta:          #CC4610;
    --color-cta-hover:    #B83E0A;   /* 5.63:1 with white */
    --color-on-cta:       #FFFFFF;
    --color-accent-dark:  #E4551F;   /* legacy accent shade (non-button use) */
    /* Label for small non-button elements sitting ON brand orange (badges,
       flags) — white is not viable there, so these keep a near-black. */
    --color-on-accent:    #101820;
    --color-accent-text:  #C74A15;   /* AA-safe orange for small text */
    --color-accent-soft:  #FEEDE4;
    --color-ink:          #2C3D55;
    --color-ink-soft:     #54677E;
    --color-paper:        #FCFEF1;   /* off-white page background */
    --color-paper-alt:    #F4F7EC;
    --color-surface:      #FFFFFF;
    --color-border:       #DCE5E0;
    --color-text-inverse: #FFFFFF;

    /* ── Semantic aliases (what components actually use) ───────────────── */
    --color-white:          #FFFFFF;
    --color-bg:             var(--color-paper);
    --color-bg-alt:         var(--color-paper-alt);
    --color-surface-dark:   var(--color-primary-deep);
    --color-text:           var(--color-ink);
    --color-text-secondary: var(--color-ink-soft);
    --color-link:           var(--color-primary);
    --color-error:          #B3372E;
    --color-success:        #2E6B46;

    /* ── Typography ────────────────────────────────────────────────────── */
    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.375rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    --leading-tight:   1.12;
    --leading-snug:    1.35;
    --leading-normal:  1.65;
    --leading-relaxed: 1.8;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --tracking-wide: 0.14em;   /* uppercase section labels */

    /* ── Spacing ───────────────────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ── Layout ────────────────────────────────────────────────────────── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1200px;
    --header-height: 76px;
    --cta-bar-height: 68px;

    /* ── Borders & radius (crisp, corporate) ───────────────────────────── */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-full: 9999px;

    /* ── Shadows (cool, low-alpha) ─────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(22, 41, 63, 0.05);
    --shadow-sm: 0 1px 3px rgba(22, 41, 63, 0.07), 0 1px 2px rgba(22, 41, 63, 0.04);
    --shadow-md: 0 4px 10px -2px rgba(22, 41, 63, 0.08), 0 2px 4px -2px rgba(22, 41, 63, 0.04);
    --shadow-lg: 0 12px 24px -6px rgba(22, 41, 63, 0.10), 0 4px 8px -4px rgba(22, 41, 63, 0.04);
    --shadow-xl: 0 22px 40px -10px rgba(22, 41, 63, 0.14);

    /* ── Transitions ───────────────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* ── Z-index ───────────────────────────────────────────────────────── */
    --z-content:  2;
    --z-sticky:   200;
    --z-ctabar:   250;
    --z-overlay:  300;
    --z-modal:    400;
}