:root {
    /* Colors */
    --color-white: #FFFFFF;

    /* Backgrounds */
    --color-bg-secondary: #F6F8FB;
    --color-bg-tertiary: #EEF2F6;
    --color-bg-panel: #F3F5F8;
    --color-bg-accent-soft: #EDF3FA;

    /* Text */
    --color-text-primary: #121820;
    --color-text-secondary: #3C4754;
    --color-text-muted: #7A8795;
    --color-text-btn: #fff;

    /* Main brand */
    --color-accent: #173B5E;
    --color-accent-hover: #102F4D;

    /* Secondary accent */
    --color-accent-warm: #3E6F94;
    --color-accent-cyan: #3978A8;

    /* CTA */
    --color-gold-start: #244F73;
    --color-gold-end: #3F789F;
    --color-gold-solid: #2C5E83;

    /* Borders */
    --color-border: #D7DEE6;

    /* Overlay */
    --color-overlay: rgba(12, 32, 50, 0.60);

    /* CTA gradient */
    --gradient-cta: linear-gradient(
        180deg,
        #3F789F 0%,
        #244F73 100%
    );

    /* Typography */
    --font-main: 'Gilroy', Arial, sans-serif;

    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.4;
    --leading-relaxed: 1.55;

    --tracking-tight: -0.04em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;

    /* Layout */
    --container-max: 1200px;
    --container-wide: 1440px;
    --container-padding: 24px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    --section-gap: 80px;
    --section-gap-sm: 48px;

    --card-gap: 20px;
    --card-padding: 24px;

    /* Radius */
    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-pill: 980px;

    /* Shadows */
    --shadow-subtle: 0 4px 20px rgba(23, 59, 94, 0.08);
    --shadow-card: 0 10px 40px rgba(23, 59, 94, 0.10);

    /* Z-index */
    --z-card-overlay: 5;
    --z-sticky-quiz: 50;
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;
}