/* ==========================================================================
   Aquila RH - Design Tokens / Variables
   Identidade visual oficial Aquila Engenharia
   ========================================================================== */

:root {
    /* Paleta primária */
    --color-yellow: #F8AC13;
    --color-black: #000000;
    --color-white: #FFFFFF;

    /* Paleta secundária */
    --color-yellow-pastel: #FFD280;
    --color-off-white: #FFF3E0;

    /* Tons auxiliares derivados */
    --color-yellow-dark: #D18E00;
    --color-yellow-light: #FFC147;
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F4F5F7;
    --color-gray-200: #E6E8EC;
    --color-gray-300: #D0D4DB;
    --color-gray-400: #A4ABB6;
    --color-gray-500: #757C88;
    --color-gray-600: #4C525D;
    --color-gray-700: #2E333B;
    --color-gray-800: #1A1D23;
    --color-gray-900: #0B0D11;

    /* Feedback / semântica */
    --color-success: #2E7D32;
    --color-success-bg: #E8F5E9;
    --color-warning: #ED6C02;
    --color-warning-bg: #FFF4E5;
    --color-danger: #C62828;
    --color-danger-bg: #FDECEA;
    --color-info: #0277BD;
    --color-info-bg: #E1F5FE;

    /* Texto */
    --text-primary: #1A1D23;
    --text-secondary: #4C525D;
    --text-muted: #757C88;
    --text-inverse: #FFFFFF;
    --text-link: #D18E00;

    /* Backgrounds */
    --bg-app: #F4F5F7;
    --bg-surface: #FFFFFF;
    --bg-sidebar: #0B0D11;
    --bg-sidebar-hover: rgba(248, 172, 19, 0.1);
    --bg-topbar: #FFFFFF;
    --bg-overlay: rgba(11, 13, 17, 0.6);

    /* Bordas */
    --border-color: #E6E8EC;
    --border-color-strong: #D0D4DB;
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-pill: 999px;

    /* Tipografia */
    --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-family-brand: 'Roboto', serif;
    --font-family-mono: 'SF Mono', Menlo, Consolas, monospace;

    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 32px;
    --font-size-display: 40px;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;

    /* Espaçamentos (escala 4px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* Sombras */
    --shadow-xs: 0 1px 2px rgba(11, 13, 17, 0.05);
    --shadow-sm: 0 1px 3px rgba(11, 13, 17, 0.08), 0 1px 2px rgba(11, 13, 17, 0.04);
    --shadow: 0 4px 8px rgba(11, 13, 17, 0.08), 0 2px 4px rgba(11, 13, 17, 0.04);
    --shadow-lg: 0 12px 24px rgba(11, 13, 17, 0.12), 0 4px 8px rgba(11, 13, 17, 0.06);
    --shadow-xl: 0 24px 48px rgba(11, 13, 17, 0.16), 0 8px 16px rgba(11, 13, 17, 0.08);
    --shadow-brand: 0 8px 24px rgba(248, 172, 19, 0.25);

    /* Z-Index */
    --z-dropdown: 500;
    --z-sticky: 600;
    --z-topbar: 700;
    --z-sidebar: 750;
    --z-overlay: 800;
    --z-modal: 900;
    --z-toast: 1000;

    /* Transições */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 320ms ease;

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 72px;
    --topbar-height: 64px;
    --container-max: 1600px;
}

/* Modo escuro (preparado para extensão futura) */
[data-theme="dark"] {
    --bg-app: #0B0D11;
    --bg-surface: #1A1D23;
    --text-primary: #FFFFFF;
    --text-secondary: #D0D4DB;
    --border-color: #2E333B;
}