:root {
    /* ── Brand colors ── */
    --color-primary: #1e4683;
    --color-primary-dark: #1a2a38;
    --color-primary-medium: #243b6b;
    --color-navy: #002b5c;
    --color-navy-deep: #002f6c;

    --color-accent: #e31e24;
    --color-accent-alt: #e1171f;
    --color-accent-hover: #c9191f;
    --color-accent-dark: #c41a1f;
    --color-accent-bright: #d71920;
    --color-accent-youtube: #e50914;
    --color-accent-youtube-hover: #c20811;

    /* ── Neutral colors ── */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #141414;
    --color-text-muted: #525252;
    --color-text-secondary: #444444;
    --color-text-tertiary: #555555;
    --color-text-dark: #1c1c1c;
    --color-text-charcoal: #231f20;
    --color-text-gray: #666666;
    --color-text-gray-dark: #333333;

    /* ── Background colors ── */
    --color-bg-page: #fcfcfc;
    --color-bg-white: #ffffff;
    --color-bg-blue-light: #e3eeff;
    --color-bg-red-light: #ffeeef;
    --color-bg-blue-pale: #f4f8ff;
    --color-bg-blue-soft: #f9fcff;
    --color-bg-blue-input: #fbfdff;
    --color-bg-gray-light: #f5f5f5;
    --color-bg-gray-pale: #fafafa;
    --color-bg-gray-tab: #eaecf2;
    --color-bg-suggest-hover: #e9f3ff;
    --color-bg-sky: #c0dbfb;
    --color-bg-blue-tint: #f1f7ff;
    --color-bg-blue-wash: #f0f6ff;
    --color-bg-blue-frost: #f3f9ff;

    /* ── Accent text ── */
    --color-indigo: #2e3192;
    --color-text-heading: #202020;

    /* ── Border colors ── */
    --color-border-light: #f4f4f4;
    --color-border-lighter: #f0f0f0;
    --color-border: #dddddd;
    --color-border-medium: #cccccc;
    --color-border-dark: #999999;
    --color-border-muted: #d0d0d0;
    --color-border-divider: #cacaca;
    --color-border-input: #d5d9e5;
    --color-border-focus: #b9e5fb;
    --color-border-eee: #eeeeee;
    --color-border-subtle: #e6e6e6;

    /* ── Gradients ── */
    --gradient-primary: linear-gradient(118.04deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.74%);
    --gradient-primary-137: linear-gradient(137.97deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-158: linear-gradient(158.33deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-165: linear-gradient(165.3deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-168: linear-gradient(168.84deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-169: linear-gradient(169.62deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-177: linear-gradient(177.57deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-176: linear-gradient(176.99deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-176-alt: linear-gradient(176.24deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-166: linear-gradient(166.21deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-102: linear-gradient(102.61deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-108: linear-gradient(108.83deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.75%);
    --gradient-primary-180: linear-gradient(180deg, var(--color-primary) 3.55%, var(--color-primary-dark) 95.74%);
    --gradient-card: linear-gradient(111.71deg, var(--color-white) 0.79%, var(--color-bg-blue-tint) 99.21%);
    --gradient-fade-white: linear-gradient(180deg, var(--color-white) 55.056%, rgba(255, 255, 255, 0) 100%);
    --gradient-overlay-dark: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.91) 51%, var(--color-black) 100%);
    --gradient-overlay-primary: linear-gradient(to bottom, rgba(26, 42, 56, 0) 33.46%, rgba(26, 42, 56, 0.37) 47.56%, var(--color-primary-dark) 71.69%);

    /* ── Typography ── */
    --font-family-base: 'Inter', sans-serif;

    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-md: 20px;
    --font-size-lg: 48px;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;

    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-body: 120%;
    --line-height-relaxed: 1.8;

    /* ── Layout ── */
    --container-max: 1720px;
    --container-max-wide: 1920px;
    --header-height: 120px;
    --container-padding-x: 5%;
    --container-padding-x-wide: 100px;

    /* ── Spacing scale ── */
    --space-1: 8px;
    --space-2: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 22px;
    --space-7: 30px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 80px;
    --space-11: 100px;

    /* ── Component sizes ── */
    --btn-min-height: 59px;
    --btn-min-height-lg: 60px;
    --btn-padding-x: 30px;
    --btn-min-width-outline: 250px;
    --btn-icon-size: 13.5px;
    --btn-gap: 10px;

    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-width-thin: 1px;
    --border-width-thick: 2px;
    --border-width-heavy: 5px;

    /* ── Shadows ── */
    --shadow-header: 0 6px 20px rgba(0, 0, 0, 0.07);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-suggest: 0 4px 12px rgba(0, 0, 0, 0.12);

    /* ── Transitions ── */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s;
    --transition-bounce: 0.3s cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Z-index ── */
    --z-header: 11111;
}

@media screen and (max-width: 600px) {
    :root {
        --line-height-relaxed: 1.6;
    }
}