/* salary-service/resources/static/css/base/_variables.css */
:root {
    /* Theme Colors */
    --theme-color: #ff8800;
    --theme-color-rgb: 255, 136, 0;
    color-scheme: dark;

    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #3a3a3a;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-overlay-blur: rgba(26, 26, 26, 0.8);
    --bg-hover: #4a4a4a;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --text-selected: #1a1a1a;

    /* Border Colors */
    --border-primary: #4a4a4a;
    --border-secondary: rgba(255, 255, 255, 0.1);
    --border-primary-hover: #6a6a6a;

    /* Layout */
    --header-height: 64px;
    --footer-height: 60px;
    --container-max-width: 1200px;
    --container-padding: 24px;
    --container-padding-mobile: 16px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

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

    /* Z-Index Layers */
    --z-header: 1000;
    --z-modal: 1100;
    --z-tooltip: 1200;
    --z-dropdown: 100;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --radius-full: 9999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3);
}