@layer tokens, base, components, app, proposta;

@layer tokens {
  :root {
    /* Cores — brandbook Optimus */
    --navy: #123643;
    --gold: #D4A429;
    --ink: #1E2A30;
    --muted: #5B686D;      /* texto secundário: ≥4,5:1 em branco, light, aviso e erro-claro */
    --light: #F3F5F6;
    --line: #DCE2E4;
    --soft: #C9D3D6;
    --borda-campo: #748E96; /* borda de input/select/opção: ≥3:1 em branco e light */
    --foco: #AA8321;        /* contorno de foco (gold escurecido): ≥3:1 em branco e light */
    --ok: #2E7D4F;
    --erro: #B4442F;
    --aviso: #F6E7BF;
    --erro-claro: #F8E6E2;
    --branco: #FFFFFF;
    --marca-rascunho: rgba(180, 68, 47, 0.14);

    /* Tipografia */
    --fonte: "Poppins", Arial, sans-serif;
    --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --texto-xs: 0.75rem;
    --texto-sm: 0.875rem;
    --texto-base: 1rem;
    --texto-lg: 1.25rem;
    --texto-xl: 1.75rem;
    --texto-marca: 7rem;

    /* Espaçamento */
    --esp-1: 0.25rem;
    --esp-2: 0.5rem;
    --esp-3: 0.75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;

    /* Layout */
    --raio: 8px;
    --sombra: 0 1px 3px rgba(18, 54, 67, 0.12);
    --largura-sidebar: 220px;
    --largura-resumo: 320px;
  }
}