/* ══════════════════════════════════════════════════
   vars.css — Design Tokens
   Tema: Escuro neutro + acentos da logo (roxo/pink)
   ══════════════════════════════════════════════════ */

:root {
    /* ── Fundo — cinza escuro neutro (como na imagem) ── */
    --bg-base:      #14141c;   /* fundo geral */
    --bg-surface:   #1e1e28;   /* cards, sidebar */
    --bg-surface2:  #252530;   /* inputs, campos */
    --bg-surface3:  #2c2c3a;   /* hover, zebra */
    --bg-header:    #1a1a24;   /* topbar, cabeçalhos */

    /* ── Acentos da logo (mantidos nos botões) ── */
    --c-roxo-900:  #0e0020;
    --c-roxo-800:  #1a0133;
    --c-roxo-700:  #2f024d;
    --c-roxo-600:  #530383;
    --c-roxo-500:  #7a0cca;
    --c-roxo-400:  #a020f0;
    --c-roxo-300:  #c060ff;

    --c-pink-600:  #bd0150;
    --c-pink-500:  #f60350;
    --c-pink-400:  #ff3370;
    --c-pink-300:  #ff7799;

    /* ── Semânticas ── */
    --c-green:     #00c97a;
    --c-yellow:    #f0a500;
    --c-red:       #e84545;
    --c-blue:      #4a9eff;

    /* ── Texto ── */
    --c-text:      #e8e8f0;
    --c-text-dim:  #9898b0;
    --c-text-muted:#5e5e78;

    --c-white:     #f0f0f8;
    --c-white-80:  rgba(240,240,248,0.80);
    --c-white-50:  rgba(240,240,248,0.50);
    --c-white-30:  rgba(240,240,248,0.30);
    --c-white-10:  rgba(240,240,248,0.10);
    --c-white-05:  rgba(240,240,248,0.05);

    /* ── Bordas ── */
    --borda:       rgba(255,255,255,0.07);
    --borda-hover: rgba(255,255,255,0.13);
    --borda-focus: var(--c-roxo-500);

    /* ── Tipografia ── */
    --font-display: 'Inter', sans-serif;
    --font-body:    'Inter', sans-serif;

    /* ── Espaçamento ── */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
    --space-4: 16px; --space-5: 20px; --space-6: 24px;
    --space-8: 32px; --space-10: 40px;--space-12: 48px;

    /* ── Radius ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   18px;
    --radius-full: 9999px;

    /* ── Sombras ── */
    --shadow-sm:   0 1px 4px rgba(0,0,0,0.4);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.55);
    --shadow-roxo: 0 0 24px rgba(122,12,202,0.25);

    /* ── Transições ── */
    --ease:           cubic-bezier(.16,1,.3,1);
    --duration-fast:  150ms;
    --duration-med:   220ms;
    --duration-slow:  380ms;

    /* ── Layout ── */
    --sidebar-w: 240px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg-base);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    font-size: 14px;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }