/*
 * Metrics — ported from theme/Metrics.kt.
 *
 * The Compose port computes a horizontal `scale` factor because it draws to a
 * fixed artboard; CSS gets the same effect from a max-width content column plus
 * fluid padding, so the factor disappears and the design's own pixel values stay
 * literal. The compact artboard (design option 3a) takes over below 900px, the
 * same breakpoint as COMPACT_BREAKPOINT.
 */
:root {
    /* The 1280px artboard. */
    --content-width: 1280px;

    /* Header */
    --header-padding-h: 32px;
    --header-padding-v: 24px;
    --logo-size: 34px;
    --nav-gap: 32px;

    /* Hero */
    --hero-padding-h: 64px;
    --hero-padding-top: 104px;
    --hero-padding-bottom: 92px;
    --hero-title-max-width: 1000px;
    --hero-body-max-width: 600px;
    --glow-size: 820px;
    --glow-top: -300px;
    --moon-size: 340px;
    --moon-top: 52px;

    /* Products */
    --product-padding-h: 64px;
    --product-padding-v: 44px;
    --product-gap: 56px;
    --product-media-width: 470px;
    --product-media-height: 264px;
    --product-text-max-width: 330px;
    --ornament-width: 220px;   /* empty channel the ornament reads in */

    /* Bands */
    --band-padding-h: 64px;
    --waitlist-padding-v: 76px;
    --waitlist-column-gap: 80px;

    /* Contacts */
    --contacts-padding-v: 72px;
    --contact-card-gap: 16px;
    --contact-card-padding-h: 26px;
    --contact-card-padding-top: 26px;
    --contact-card-padding-bottom: 24px;
    --contact-action-size: 40px;
    --contact-action-radius: 11px;

    /* Footer */
    --footer-padding-top: 36px;
    --footer-padding-bottom: 36px;

    /* Shapes */
    --pill-radius: 999px;
    --card-radius: 14px;
    --media-radius: 8px;

    /* Floating surfaces — the reference sits around 26px. */
    --surface-radius: 26px;
    --surface-blur: 14px;
    --surface-gap: 18px;

    /* The header floats clear of the viewport edges instead of spanning them. */
    --header-float-inset: 16px;
    --header-height: 68px;
}

@media (max-width: 900px) {
    :root {
        --header-padding-h: 20px;
        --header-padding-v: 18px;
        --logo-size: 28px;
        --nav-gap: 12px;

        --hero-padding-h: 24px;
        --hero-padding-top: 64px;
        --hero-padding-bottom: 56px;
        --glow-size: 460px;
        --glow-top: -160px;
        --moon-size: 210px;
        --moon-top: 34px;

        --product-padding-h: 20px;
        --product-padding-v: 28px;
        --product-media-height: 196px;

        --band-padding-h: 20px;
        --waitlist-padding-v: 40px;

        --contacts-padding-v: 40px;
        --contact-card-gap: 12px;
        --contact-card-padding-h: 18px;
        --contact-card-padding-top: 20px;
        --contact-card-padding-bottom: 20px;
        --contact-action-size: 44px;
        --contact-action-radius: 12px;

        --footer-padding-top: 26px;
        --footer-padding-bottom: 30px;

        --surface-radius: 20px;
        --surface-gap: 12px;
        --header-float-inset: 10px;
        --header-height: 60px;
    }
}