/**
 * Hydroposhan Academy — design tokens (load first in <head>)
 * See docs/RESPONSIVE_DESIGN_SYSTEM.md
 */
:root {
    /* Breakpoints — docs/RESPONSIVE_DESIGN_SYSTEM.md (use values in @media) */
    /* xs: 0–479 | sm: 480+ | md: 640+ | lg: 768+ | xl: 1024+ | xxl: 1280+ */
    --bp-xs-max: 479.98px;
    --bp-sm: 480px;
    --bp-md: 640px;
    --bp-lg: 768px;
    --bp-xl: 1024px;
    --bp-xxl: 1280px;

    /* Layout */
    --container-max: 1280px;
    --gutter: clamp(16px, 4vw, 40px);
    /* Vertical rhythm between major sections (fluid) */
    --section-pad-y: clamp(40px, 6vw, 96px);

    /* Brand (mirror pages using :root in inline styles) */
    --primary-green: #007305;
    --primary-hover: #005a04;
    --dark-green: #004b04;
    --accent-blue: #0079c6;
    --text-main: #1a1f1b;
    --text-light: #525a54;

    /* Typography — single system for all public pages */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --text-xs: clamp(0.78rem, 0.15vw + 0.74rem, 0.84rem);
    --text-sm: clamp(0.88rem, 0.2vw + 0.84rem, 0.94rem);
    --text-nav: clamp(1.02rem, 0.35vw + 0.9rem, 1.14rem);
    --text-base: clamp(1rem, 0.25vw + 0.94rem, 1.125rem);
    --text-lg: clamp(1.1rem, 0.35vw + 1rem, 1.25rem);
    --text-xl: clamp(1.35rem, 0.8vw + 1rem, 1.65rem);
    --text-2xl: clamp(1.65rem, 1.5vw + 1.1rem, 2.15rem);
    --text-3xl: clamp(2rem, 2.5vw + 1rem, 3rem);
    --leading-tight: 1.2;
    --leading-body: 1.65;
    --leading-loose: 1.75;
    --tracking-tight: -0.02em;
    --tracking-wide: 0.06em;

    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Mobile bottom nav clearance */
    --ha-mobile-bottom-nav-base: 84px;
    --ha-mobile-bottom-nav-h: calc(84px + env(safe-area-inset-bottom, 0px));
    --ha-page-pad-nav-clear: calc(var(--ha-mobile-bottom-nav-h, 84px) + 24px);
}