:root {
    --color-ink-navy: #0b3558;
    --color-signal-blue: #006bff;
    --color-signal-blue-hover: #0058d6;
    --color-slate-gray: #476788;
    --color-mist-gray: #a6bbd1;
    --color-cloud: #f8f9fb;
    --color-paper: #ffffff;
    --color-pebble: #f0f3f8;
    --color-pebble-hover: #e6ecf4;
    --color-hairline: #d4e0ed;
    --color-deep-cobalt: #004eba;
    --color-badge-fill: #e6f0ff;
    --color-error: #d92d20;
    --color-coral-magenta: #e55cff;
    --color-sky-cyan: #0099ff;

    --font-gilroy: 'Gilroy', 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --text-caption: 12px;
    --text-body-sm: 14px;
    --text-body: 16px;
    --text-button: 18px;
    --text-body-lg: 20px;
    --text-subheading: 28px;

    --spacing-8: 8px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-48: 48px;

    --radius-small: 4px;
    --radius-inputs: 8px;
    --radius-buttons: 8px;
    --radius-productcards: 16px;
    --radius-cards: 24px;
    --radius-badges: 9999px;

    --shadow-sm: rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, rgba(71, 103, 136, 0.03) 0px 4px 10px 0px, rgba(71, 103, 136, 0.05) 0px 10px 20px 0px;
    --shadow-sm-2: 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-sm-3: 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;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--color-cloud);
    color: var(--color-ink-navy);
    font-family: var(--font-gilroy);
    font-size: var(--text-body-sm);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}