/* ============================================================
   variaveis.css — PALETA PREMIUM OFICINA500
   Local: /assets/css/variaveis.css

   Verde musgo + dourado · tons quentes e saturados
   Para trocar o tema: edite o bloco :root abaixo
   ============================================================ */

:root {

    /* ----------------------------------------------------------
       TIPOGRAFIA
       ---------------------------------------------------------- */

    --font-primary: 'Inter', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-smoothing: antialiased;

    /* ----------------------------------------------------------
       PALETA PREMIUM — tokens base
       ---------------------------------------------------------- */

    /* Fundo */
    --color-bg: #f7f5ef;
    --color-surface: #ffffff;

    /* Verde musgo */
    --color-primary: #2e4020;
    --color-primary-hover: #243318;
    --color-primary-light: #dde8cc;
    --color-primary-muted: #5a6b48;
    --color-primary-subtle: #7a9e5c;

    /* Dourado */
    --color-gold: #c4a030;
    --color-gold-hover: #a8881e;
    --color-gold-light: #f4ecc8;
    --color-gold-dark: #7a5a0a;
    --color-gold-darker: #5a3a08;

    /* Texto */
    --color-text-primary: #1a2a10;
    --color-text-secondary: #5a6b48;
    --color-text-muted: #7a9e5c;
    --color-text-on-dark: #f0e8c8;

    /* Bordas */
    --color-border: #dedad0;
    --color-border-strong: #c8c4b4;
    --color-border-gold: #c4a030;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-pill: 20px;

    /* Espaçamentos */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* ----------------------------------------------------------
       MAPEAMENTO DO SISTEMA (compatível com layout/login/componentes)
       ---------------------------------------------------------- */

    --cor-primaria:        var(--color-primary);
    --cor-primaria-hover:  var(--color-primary-hover);
    --cor-primaria-light:  var(--color-primary-light);
    --cor-primaria-rgb:    46, 64, 32;

    --cor-secundaria:       var(--color-gold);
    --cor-secundaria-hover: var(--color-gold-hover);
    --cor-secundaria-light: var(--color-gold-light);
    --cor-secundaria-rgb:   196, 160, 48;

    /* ----------------------------------------------------------
       FEEDBACK — harmonizado com a paleta
       ---------------------------------------------------------- */

    --cor-sucesso:         #3d7a28;
    --cor-sucesso-light:   #e8f4e0;
    --cor-sucesso-rgb:     61, 122, 40;

    --cor-alerta:          var(--color-gold-dark);
    --cor-alerta-light:    var(--color-gold-light);
    --cor-alerta-rgb:      122, 90, 10;

    --cor-erro:            #b83232;
    --cor-erro-light:      #fce8e8;
    --cor-erro-rgb:        184, 50, 50;

    --cor-info:            #4a6b38;
    --cor-info-light:      #e4eed8;
    --cor-info-rgb:        74, 107, 56;

    /* ----------------------------------------------------------
       TONS NEUTROS — quentes, alinhados ao musgo
       ---------------------------------------------------------- */

    --cinza-50:  #faf9f5;
    --cinza-100: var(--color-bg);
    --cinza-200: var(--color-border);
    --cinza-300: var(--color-border-strong);
    --cinza-400: #a8b898;
    --cinza-500: var(--color-text-secondary);
    --cinza-600: #4a5c38;
    --cinza-700: #2e4020;
    --cinza-800: #243318;
    --cinza-900: var(--color-text-primary);

    /* ----------------------------------------------------------
       SUPERFÍCIES E FUNDOS
       ---------------------------------------------------------- */

    --fundo-app:        var(--color-bg);
    --fundo-sidebar:    var(--color-surface);
    --fundo-topbar:     rgba(255, 255, 255, .88);
    --fundo-card:       rgba(255, 255, 255, .82);
    --fundo-card-solid: var(--color-surface);
    --fundo-input:      var(--color-surface);
    --fundo-hover:      #f0ede4;
    --fundo-ativo:      var(--color-primary-light);

    /* ----------------------------------------------------------
       TEXTOS
       ---------------------------------------------------------- */

    --texto-titulo:    var(--color-text-primary);
    --texto-corpo:     var(--color-text-secondary);
    --texto-suave:     var(--color-text-muted);
    --texto-desativo:  #a8b898;
    --texto-inverso:   var(--color-text-on-dark);
    --texto-link:      var(--color-primary);

    /* ----------------------------------------------------------
       BORDAS
       ---------------------------------------------------------- */

    --borda:        var(--color-border);
    --borda-forte:  var(--color-border-strong);
    --borda-input:  var(--color-border-strong);
    --borda-focus:  var(--color-primary);

    /* ----------------------------------------------------------
       SOMBRAS — com leve tom verde/dourado
       ---------------------------------------------------------- */

    --sombra-sm:  0 1px 3px rgba(26, 42, 16, .06), 0 1px 2px rgba(26, 42, 16, .04);
    --sombra-md:  0 4px 16px rgba(26, 42, 16, .08), 0 2px 6px rgba(26, 42, 16, .04);
    --sombra-lg:  0 10px 40px rgba(26, 42, 16, .10), 0 4px 12px rgba(26, 42, 16, .05);
    --sombra-xl:  0 20px 60px rgba(26, 42, 16, .12), 0 8px 20px rgba(26, 42, 16, .06);

    --sombra-primaria:   0 4px 20px rgba(var(--cor-primaria-rgb), .28);
    --sombra-secundaria: 0 4px 20px rgba(var(--cor-secundaria-rgb), .32);

    /* ----------------------------------------------------------
       GLASSMORPHISM
       ---------------------------------------------------------- */

    --glass-bg:     rgba(255, 255, 255, .78);
    --glass-border: rgba(222, 218, 208, .65);
    --glass-blur:   blur(16px);
    --glass-shadow: 0 8px 32px rgba(26, 42, 16, .08);

    /* ----------------------------------------------------------
       RAIOS — extras além dos tokens base
       ---------------------------------------------------------- */

    --radius-lg: 14px;
    --radius-xl: 20px;

    /* ----------------------------------------------------------
       ESPAÇAMENTO — escala do sistema + alias dos tokens
       ---------------------------------------------------------- */

    --esp-1:  var(--space-xs);
    --esp-2:  var(--space-sm);
    --esp-3:  var(--space-md);
    --esp-4:  var(--space-lg);
    --esp-5:  20px;
    --esp-6:  var(--space-xl);
    --esp-8:  var(--space-2xl);
    --esp-10: 40px;
    --esp-12: 48px;
    --esp-16: 64px;

    /* ----------------------------------------------------------
       TIPOGRAFIA — escala do sistema
       ---------------------------------------------------------- */

    --fonte-sans: var(--font-primary);
    --fonte-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   17px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  30px;

    --peso-normal: var(--font-weight-regular);
    --peso-medio:  var(--font-weight-medium);
    --peso-semi:   600;
    --peso-bold:   var(--font-weight-bold);

    /* ----------------------------------------------------------
       LAYOUT
       ---------------------------------------------------------- */

    --sidebar-largura:      240px;
    --sidebar-largura-mini: 68px;
    --topbar-altura:        60px;

    /* ----------------------------------------------------------
       TRANSIÇÕES E Z-INDEX
       ---------------------------------------------------------- */

    --transicao:       .18s ease;
    --transicao-lenta: .32s ease;

    --z-base:     1;
    --z-dropdown: 100;
    --z-sidebar:  200;
    --z-topbar:   300;
    --z-modal:    400;
    --z-toast:    500;
}

/* Suavização de fonte global */
html {
    -webkit-font-smoothing: var(--font-smoothing);
    -moz-osx-font-smoothing: grayscale;
}