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

:root {
    /* ── Brand colors (defaults = 'warm-stone-luxe' preset) ────────────── */
    --color-primary:      #2E4B3F;   /* deep forest green */
    --color-primary-dark: #233B32;
    --color-primary-soft: #E9EFEA;
    --color-accent-soft:  #E4C0A8;   /* decorative only — never text */
    --color-ink:          #26292B;
    --color-ink-soft:     #5B5F58;
    --color-paper:        #F7F3EC;   /* warm ivory */
    --color-paper-alt:    #EFE8DC;   /* sand */
    --color-copper:       #C77B4F;   /* large text / decorative only */
    --color-copper-text:  #9A5A33;   /* small-text-safe copper */
    --color-sage:         #6E8273;
    --color-border:       #E6DFD2;
    --color-motif-1:      #E3DDCE;   /* ripple ring tints — decorative */
    --color-motif-2:      #D5CCB8;
    --color-motif-3:      #C4B8A0;

    /* ── Semantic aliases (what components actually use) ───────────────── */
    --color-white:          #FFFFFF;
    --color-bg:             var(--color-paper);
    --color-bg-alt:         var(--color-paper-alt);
    --color-surface:        #FFFFFF;
    --color-surface-dark:   var(--color-primary-dark);
    --color-text:           var(--color-ink);
    --color-text-secondary: var(--color-ink-soft);
    --color-text-inverse:   #F8F5EE;
    --color-accent:         var(--color-copper-text);
    --color-link:           var(--color-primary-dark);
    --color-error:          #B3462E;
    --color-success:        #3E6B4F;

    /* ── Typography ────────────────────────────────────────────────────── */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', 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.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

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

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

    --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;
    --container-2xl: 1400px;
    --header-height: 127px; /* 78px logo deck + 48px nav deck + border */
    --ribbon-height: 34px;
    --cta-bar-height: 64px;

    /* ── Borders & radius (restrained — premium, not bubbly) ───────────── */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-full: 9999px;

    /* ── Shadows (soft, low-alpha, warm) ───────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(38, 41, 43, 0.04);
    --shadow-sm: 0 1px 3px rgba(38, 41, 43, 0.06), 0 1px 2px rgba(38, 41, 43, 0.03);
    --shadow-md: 0 4px 10px -2px rgba(38, 41, 43, 0.06), 0 2px 4px -2px rgba(38, 41, 43, 0.03);
    --shadow-lg: 0 12px 24px -6px rgba(38, 41, 43, 0.08), 0 4px 8px -4px rgba(38, 41, 43, 0.03);
    --shadow-xl: 0 22px 40px -10px rgba(38, 41, 43, 0.10);

    /* ── Transitions ───────────────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

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