:root {
    --atlantic: #4E4EE2; 
    --cherry: #d70036;
    --cornFlower: #899bff;
    --grey: #7c7e95;
    --orange: #F56900;
    --lightOrange: #ff8d00;
    --mist: #f1f5f9;
    --midnight: #1e293b;
    --neonBlue: #6161FF;
    --royal: #001a73;
    --successGreen: #00BB53;
    --suvaGrey: #bfc0cb;
    --sunset: #e75204;

    /* Z-Index Scale 
       Note: <dialog> elements use the browser's "top layer" which sits above 
       all regular z-index values. Use --z-modal-* for elements inside dialogs.
    */
    --z-dropdown: 100;        /* Dropdowns, select menus */
    --z-sticky: 200;          /* Sticky table headers */
    --z-tooltip: 500;         /* Tooltips, popovers */
    --z-overlay: 900;         /* Error toast overlay (blocks page) */
    --z-loading: 950;         /* Loading spinner overlay */
    --z-toast: 1000;          /* Toast notifications (page-level) */
    
    /* Inside modals (top-layer), z-index is relative to dialog content */
    --z-modal-toast: 100;     /* Toast inside modal dialog */
}