/* =========================================================
   ATRA HEADER
   Global Variables
========================================================= */

:root {

    /* Brand */
    --atra-color-navy: #0B132B;
    --atra-color-blue: #00B4D8;
    --atra-color-blue-dark: #0096B7;

    /* Text */
    --atra-color-text: #172033;
    --atra-color-muted: #718096;
    --atra-color-white: #FFFFFF;

    /* Background */
    --atra-color-background: #FFFFFF;
    --atra-color-surface: #F8FAFC;
    --atra-color-border: #E2E8F0;

    /* Layout */
    --atra-header-container: 1440px;

    /* Spacing */
    --atra-space-xs: 4px;
    --atra-space-sm: 8px;
    --atra-space-md: 16px;
    --atra-space-lg: 24px;
    --atra-space-xl: 32px;

    /* Radius */
    --atra-radius-sm: 6px;
    --atra-radius-md: 10px;
    --atra-radius-lg: 16px;

    /* Shadows */
    --atra-shadow-sm:
        0 2px 8px rgba(11, 19, 43, 0.06);

    --atra-shadow-md:
        0 8px 24px rgba(11, 19, 43, 0.10);

    /* Z-index */
    --atra-z-header: 9000;
    --atra-z-dropdown: 9100;
    --atra-z-mega-menu: 9200;
    --atra-z-overlay: 9300;

}