/* =============================================================================
   base.css — Variáveis, reset e estilos fundamentais
   ============================================================================= */

/* ---- Variáveis — Tema Escuro (padrão) -------------------------------------- */
:root,
[data-tema="escuro"] {
    color-scheme: dark;

    /* Cores primárias */
    --cor-primaria:         #4f7cff;
    --cor-primaria-hover:   #3d6bee;
    --cor-primaria-suave:   rgba(79, 124, 255, 0.12);

    /* Superfícies */
    --bg-app:               #0e1117;
    --bg-sidebar:           #13161e;
    --bg-card:              #1a1d27;
    --bg-card-hover:        #1f2333;
    --bg-input:             #1f2333;
    --bg-topbar:            #13161e;
    --bg-overlay:           rgba(0, 0, 0, 0.6);

    /* Bordas */
    --borda:                rgba(255, 255, 255, 0.07);
    --borda-foco:           var(--cor-primaria);

    /* Texto */
    --texto-primario:       #e8eaf0;
    --texto-secundario:     #8b92a8;
    --texto-terciario:      #555d77;
    --texto-inverso:        #0e1117;

    /* Status */
    --cor-sucesso:          #22c55e;
    --cor-sucesso-suave:    rgba(34, 197, 94, 0.12);
    --cor-aviso:            #f59e0b;
    --cor-aviso-suave:      rgba(245, 158, 11, 0.12);
    --cor-erro:             #ef4444;
    --cor-erro-suave:       rgba(239, 68, 68, 0.12);
    --cor-info:             #38bdf8;
    --cor-info-suave:       rgba(56, 189, 248, 0.12);

    /* Status de ativos */
    --status-disponivel:    #22c55e;
    --status-em-uso:        #4f7cff;
    --status-manutencao:    #f59e0b;
    --status-descartado:    #6b7280;

    /* Sombras */
    --sombra-card:          0 2px 12px rgba(0, 0, 0, 0.3);
    --sombra-modal:         0 20px 60px rgba(0, 0, 0, 0.5);
    --sombra-dropdown:      0 8px 24px rgba(0, 0, 0, 0.4);

    /* Tipografia */
    --fonte:                'Inter', system-ui, -apple-system, sans-serif;
    --fonte-mono:           'Fira Code', 'Cascadia Code', ui-monospace, monospace;

    /* Dimensões */
    --largura-sidebar:      240px;
    --altura-topbar:        56px;
    --raio:                 8px;
    --raio-lg:              12px;
    --raio-xl:              16px;

    /* Transições */
    --transicao:            150ms ease;
    --transicao-media:      250ms ease;
}

/* ---- Variáveis — Tema Claro ------------------------------------------------ */
[data-tema="claro"] {
    color-scheme: light;

    --bg-app:               #f4f6fb;
    --bg-sidebar:           #ffffff;
    --bg-card:              #ffffff;
    --bg-card-hover:        #f8faff;
    --bg-input:             #f1f3f9;
    --bg-topbar:            #ffffff;
    --bg-overlay:           rgba(0, 0, 0, 0.35);

    --borda:                rgba(0, 0, 0, 0.08);

    --texto-primario:       #1a1d27;
    --texto-secundario:     #4b5168;
    --texto-terciario:      #9ba3bf;
    --texto-inverso:        #ffffff;

    --sombra-card:          0 1px 6px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
    --sombra-modal:         0 16px 48px rgba(0, 0, 0, 0.16);
}

/* ---- Reset ----------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--fonte);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--texto-primario);
    background-color: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg {
    display: block;
    max-width: 100%;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ---- Tipografia ------------------------------------------------------------ */
h1 { font-size: 1.71rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
h2 { font-size: 1.43rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
h3 { font-size: 1.14rem; font-weight: 600; line-height: 1.35; }
h4 { font-size: 1rem;    font-weight: 600; line-height: 1.4; }

/* ---- Utilitários ---------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.texto-secundario { color: var(--texto-secundario); }
.texto-erro       { color: var(--cor-erro); }
.texto-sucesso    { color: var(--cor-sucesso); }

.negrito  { font-weight: 600; }
.mono     { font-family: var(--fonte-mono); }

/* ---- Badges de status ----------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 0.786rem;
    font-weight: 500;
    white-space: nowrap;
}

.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-disponivel  { color: var(--cor-sucesso);  background: var(--cor-sucesso-suave); }
.badge-em-uso      { color: var(--cor-primaria);  background: var(--cor-primaria-suave); }
.badge-manutencao  { color: var(--cor-aviso);     background: var(--cor-aviso-suave); }
.badge-descartado  { color: var(--texto-terciario); background: rgba(107, 114, 128, 0.15); }
.badge-info        { color: var(--cor-info);      background: var(--cor-info-suave); }
.badge-erro        { color: var(--cor-erro);      background: var(--cor-erro-suave); }

/* ---- Scrollbar personalizada ---------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borda); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--texto-terciario); }