:root {
    /* Colors — DESIGN.md "Calendly.com" reference: navy ink on cool marble.
       Mapped onto the existing token roles so every component that already
       consumes these variables picks up the new palette automatically. */
    --color-primary: #006BFF;
    --color-primary-hover: #0055CC;
    --color-primary-disable: #A6BBD1;
    --color-primary-container: #E6F0FF;
    --color-on-primary: #FFFFFF;
    --color-secondary: #0B3558;
    --color-text: #0B3558;
    --color-outline: #D4E0ED;
    --color-outline-variant: #A6BBD1;
    --color-background: #F8F9FB;
    --color-overlay: rgba(11, 53, 88, 0.5);
    --color-surface: #FFFFFF;
    --color-grey-text: #476788;
    --color-grey-base: #A6BBD1;
    /* Slate Gray — same role as before (secondary body copy, meta lines),
       swapped to DESIGN.md's Slate Gray which already clears 4.5:1 on white
       at the small sizes this is used at. */
    --color-text-muted: #476788;
    --color-grey-surface: #F0F3F8;
    --color-secondary-stroke: #D4E0ED;

    /* Decorative accents — atmosphere only, never functional UI color
       (see DESIGN.md Do's/Don'ts): blobs behind imagery, not fills. */
    --color-accent-magenta: #E55CFF;
    --color-accent-cyan: #0099FF;

    /* Typography */
    --font-family: "Golos Text", Helvetica, Arial, sans-serif;

    /* Spacing */
    --space-4xs: 4px;
    --space-3xs: 8px;
    --space-xs: 12px;
    --space-m: 16px;
    --space-l: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-pill: 9999px;

    /* Elevation — DESIGN.md's blue-tinted shadow stacks (Slate Gray base)
       instead of neutral black, per "Don't apply shadows with neutral
       black" in DESIGN.md. */
    --shadow-card: rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, rgba(71, 103, 136, 0.03) 0px 8px 15px 0px, rgba(71, 103, 136, 0.08) 0px 30px 50px 0px;
    --shadow-card-hover: rgba(71, 103, 136, 0.05) 0px 4px 10px 0px, rgba(71, 103, 136, 0.04) 0px 10px 20px 0px, rgba(71, 103, 136, 0.1) 0px 30px 50px 0px;
    --shadow-button: rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, rgba(71, 103, 136, 0.03) 0px 8px 15px 0px, rgba(71, 103, 136, 0.06) 0px 15px 30px 0px;
}