:root {

    /* ==========================
       Colors
    ========================== */

    --color-primary: #0F1C2E;
    --color-primary-dark: #16253C;
    --color-primary-darker: #1D3050;

    --color-accent: #00A0A2;

    --color-white: #FFFFFF;

    --color-text: #525F70;

    --color-background: #FFFFFF;
    --color-background-light: #EEF3FA;
    --color-background-grey: #F0F3F6;

    /* ==========================
       Typography
    ========================== */

    --font-family-base: "Plus Jakarta Sans", sans-serif;

    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-lg: 1.5rem;        /* 24px */
    --font-size-xl: 2rem;          /* 32px */

    /* ==========================
       Font Weights
    ========================== */

    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ==========================
       Spacing
    ========================== */

    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */

    /* ==========================
       Border Radius
    ========================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* ==========================
       Transitions
    ========================== */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* ==========================
       Layout
    ========================== */

    --container-width: 1440px;

    --container-padding-desktop: var(--space-20);
    --container-padding-tablet: var(--space-10);
    --container-padding-mobile: var(--space-4);

    --header-height: 96px;
}