:root {
    /* ============================================================
       Naviam brand tokens (brand guidelines v2, December 2024).
       Reference colours by token name — never by raw hex.
       ============================================================ */

    /* Primary */
    --color-naviam-blue: #18242C;
    --color-naviam-green: #C4FF00;
    --color-naviam-white: #F0F4F6;
    --color-logo-green: #BDE64D;

    /* Secondary */
    --color-light-blue: #79C8F8;
    --color-slate: #365A6F;
    --color-fuscia: #C40F9C;
    --color-black: #000000;
    --color-white: #FFFFFF;

    /* Extended grays (Naviam Blue tints/shades) */
    --color-gray-1: #DADFE2;
    --color-gray-2: #C4CACE;
    --color-gray-3: #AEB5B9;
    --color-gray-4: #98A0A5;
    --color-gray-5: #838B91;
    --color-gray-6: #6D767D;
    --color-gray-7: #576169;
    --color-gray-8: #414C54;
    --color-gray-9: #2B3740;

    /* Extended greens (Naviam Green tints/shades) */
    --color-green-1: #DCFF48;
    --color-green-2: #B1E705;
    --color-green-3: #9ECE0A;
    --color-green-4: #8BB60F;
    --color-green-5: #789E14;

    /* Extended light blues */
    --color-lb-2: #6FB7E4;
    --color-lb-3: #65A7CF;
    --color-lb-8: #335469;
    --color-lb-10: #1F3340;

    /* Extended slates */
    --color-slate-2: #335468;
    --color-slate-8: #1C303A;
    --color-slate-10: #111D23;

    /* ---- Legacy aliases (retained for existing styles) ---- */
    --n-white: rgb(240, 244, 246);
    --n-blue: rgb(24, 36, 44);
    --n-green: rgb(196, 255, 0);
    --n-logo-green: rgb(189, 230, 77);

    --s-pink: rgb(195, 59, 156);
    --s-light-blue: rgb(121, 200, 248);
    --s-state-blue: rgb(54, 90, 111);
    --s-black: rgb(0, 0, 0);
    --s-white: rgb(255, 255, 255);

    /* Semantic Colors */
    --background-primary: var(--n-white);
    --text-primary: var(--n-blue);
    --accent-primary: var(--n-green);
    --accent-secondary: var(--n-logo-green);
    
    /* UI States */
    --button-primary: var(--s-state-blue);
    --button-hover: var(--n-blue);
    --link-color: var(--s-light-blue);
    --focus-ring: var(--n-logo-green);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
    :root {
        --background-primary: var(--n-blue);
        --text-primary: var(--n-white);
    }
}

/* Respect users who prefer reduced motion (brand accessibility requirement) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}