/* Shared SEACAN values, taken from the existing catalog. See docs/VISUAL-GUIDE.md. */
:root {
    --seacan-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --seacan-color-page: #ece9e3;
    --seacan-color-text: #172626;
    --seacan-color-muted: #596760;
    --seacan-color-surface: #fff;
    --seacan-color-subtle: #f3f6f2;
    --seacan-color-border: #d9dfdc;
    --seacan-color-brand: #4f8371;
    --seacan-color-action: #ff8a00;
    --seacan-color-control: #ebebeb;
    --seacan-control-height: 50px;
    --seacan-radius-card: 12px;
    --seacan-radius-media: 22px;
    --seacan-radius-product: 28px;
    --seacan-radius-control: 8px;
    --seacan-radius-pill: 100px;
    --seacan-space-1: 8px;
    --seacan-space-2: 12px;
    --seacan-space-3: 16px;
    --seacan-space-4: 24px;
    --seacan-space-5: 32px;
    --seacan-space-6: 40px;
    --seacan-section-gap: 100px;
    --seacan-heading-size: 34px;
    --seacan-heading-weight: 600;
    --seacan-heading-line: 1.2;
    --seacan-card-title-size: 22px;
    --seacan-body-size: 16px;
    --seacan-lead-size: 18px;
    --seacan-small-size: 14px;
    --seacan-label-size: 13px;
    --seacan-body-line: 1.55;
}

@media (max-width: 1200px) {
    :root { --seacan-heading-size: 28px; }
}

@media (max-width: 1000px) {
    :root { --seacan-section-gap: 72px; }
}

@media (max-width: 700px) {
    :root {
        --seacan-section-gap: 56px;
        --seacan-heading-size: 26px;
        --seacan-card-title-size: 20px;
        --seacan-lead-size: 16px;
    }
}