:root {
    /* Brand Colors */
    --color-primary: #d60012;
    --color-primary-dark: #8e0010;

    /* Neutral Colors */
    --color-black: #111216;
    --color-steel-gray: #7a7d82;
    --color-concrete-gray: #d9d9d5;
    --color-text-gray: #55585e;
    --color-warm-white: #f5f4f1;
    --color-white: #ffffff;

    /* Background Colors */
    --color-background: #ffffff;
    --color-background-soft: #f5f4f1;
    --color-surface: #ffffff;

    /* Border Colors */
    --color-border: #d9d9d5;
    --color-border-light: #ececea;

    /* Typography */
    --font-primary: "Plus Jakarta Sans", Arial, sans-serif;

    /* Font Weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Container */
    --container-width: 1440px;
    --container-padding: 96px;

    /* Header */
    --header-height: 124px;
    --header-height-scrolled: 88px;

    /* Border Radius */
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 16px;

    /* Shadows */
    --shadow-small: 0 4px 16px rgba(17, 18, 22, 0.06);
    --shadow-medium: 0 12px 32px rgba(17, 18, 22, 0.1);
    --shadow-large: 0 20px 50px rgba(17, 18, 22, 0.14);

    /* Transitions */
    --transition-fast: 180ms ease;
    --transition-normal: 280ms ease;
    --transition-slow: 450ms ease;

    /* Layering */
    --z-header: 1000;
    --z-menu: 1100;
    --z-overlay: 1200;
}


/* Laptop */
@media (max-width: 1440px) {
    :root {
        --container-padding: 64px;
        --header-height: 108px;
    }
}


/* Tablet */
@media (max-width: 1024px) {
    :root {
        --container-padding: 40px;
        --header-height: 92px;
    }
}


/* Mobile */
@media (max-width: 640px) {
    :root {
        --container-padding: 22px;
        --header-height: 82px;
    }
}