/** * Hydroposhan Academy — design tokens (load first in ) * 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; /* 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; }