/**
 * BloomLab Design Tokens v2026
 * Shared typography & spacing for consistent UX across all landing pages.
 * Colors remain product-specific (intentionally not overridden).
 * 
 * Usage: Enqueue this before page-specific styles so :root vars cascade.
 */

:root {
    /* === TYPOGRAPHY === */
    --bloom-font-h1: clamp(2.5rem, 5vw, 3.8rem);
    --bloom-font-h2: clamp(2.2rem, 4.5vw, 3.4rem);
    --bloom-font-h2-lg: clamp(2.5rem, 5vw, 3.8rem);
    --bloom-font-h3: 1.35rem;
    --bloom-font-h3-sm: 1.25rem;
    --bloom-font-h4: 1.15rem;
    --bloom-font-body: 1.05rem;
    --bloom-font-lead: 1.15rem;
    --bloom-font-small: 0.95rem;
    --bloom-line-height-tight: 1.1;
    --bloom-line-height-body: 1.6;
    --bloom-font-weight-bold: 700;
    --bloom-font-weight-extrabold: 800;

    /* === FLUID SIDE PADDING (2026 best practice) ===
       Scales smoothly: 16px on small phones → ~32px on tablets → 60px on desktop.
       Respects safe-area-inset for notched devices (iPhone X+). */
    --bloom-side-padding: clamp(16px, 5vw, 60px);
    --bloom-side-padding-safe: max(var(--bloom-side-padding), env(safe-area-inset-left), env(safe-area-inset-right));

    /* === SECTION SPACING === */
    --bloom-section-padding: 80px var(--bloom-side-padding);
    --bloom-section-padding-compact: 60px var(--bloom-side-padding);
    --bloom-section-gap: 80px;
    --bloom-card-gap: 24px;
    --bloom-card-padding: 28px 24px;

    /* Hero: nav-to-badge spacing (consistent across all landing pages) */
    --bloom-hero-padding-top: 80px;
    --bloom-hero-padding-top-mobile: 40px;

    /* Mobile (used inside @media max-width: 991px) */
    --bloom-section-padding-mobile: 60px var(--bloom-side-padding);
    --bloom-section-gap-mobile: 60px;
    --bloom-card-gap-mobile: 16px;
    --bloom-font-h1-mobile: 2.2rem;
    --bloom-font-h2-mobile: 2.2rem;
    --bloom-font-lead-mobile: 1.15rem;

    /* Font family - use consistently across all pages */
    --bloom-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}