/* === Ombriel clinic design tokens === */
:root {
    /* Colors */
    --ink: #0F3D3E;
    --ink-soft: #1A5C5E;
    --teal: #0D9488;
    --teal-hover: #0F766E;
    --sage: #5F8F7A;
    --sage-soft: #E7F2ED;
    --mist: #F4F7F6;
    --surface: #FFFFFF;
    --surface-muted: #E9EFEC;
    --text: #0F3D3E;
    --text-on-dark: #F4F7F6;
    --text-secondary: #5B6E6C;
    --border: #D5E0DC;
    --border-strong: #B7C9C3;
    --error: #DC2626;
    --success: #059669;
    --sponsored-bg: #E9EFEC;
    --sponsored-text: #3D524F;

    /* Typography */
    --font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --font-body: "Manrope", system-ui, sans-serif;

    /* Radii & shadows */
    --radius: 10px;
    --radius-sm: 8px;
    --shadow-form: 0 8px 28px rgba(15, 61, 62, 0.08);
    --shadow-card: 0 4px 16px rgba(15, 61, 62, 0.06);

    /* Layout */
    --container: 1120px;
    --form-max: 680px;
    --pricing-max: 800px;
    --header-h: 64px;
    --space-section-m: 56px;
    --space-section-d: 88px;
    --pad-x: 16px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 0.35s;
}

@media (min-width: 375px) {
    :root {
        --pad-x: 20px;
    }
}

@media (min-width: 768px) {
    :root {
        --pad-x: 32px;
    }
}

@media (min-width: 1280px) {
    :root {
        --pad-x: 48px;
    }
}