/* ============================================================
   MENDES ORÇAMENTO · Design Tokens
   Marca Mendes Engenharia (azul #0048A8 + navy + aço), tema claro/escuro.
   ============================================================ */
:root{
  /* ---- brand (Mendes: azul #0048A8 + navy + aco) ---- */
  --brand:#0048A8;
  --brand-2:#0054B4;
  --brand-3:#2f74d6;
  --brand-deep:#0a1526;

  /* ---- light theme (default) — neutros frios ---- */
  --bg:#f2f5f9;
  --bg-2:#e7edf4;
  --bg-grad:radial-gradient(140% 90% at 100% 0%,#eaf0f7 0%,#f2f5f9 45%);
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --surface-3:#eef2f8;
  --text:#0f1e33;
  --text-2:#4b5a70;
  --text-3:#8595a9;
  --border:#e4eaf1;
  --border-2:#d3dce7;
  --primary:#0048A8;
  --primary-2:#0054B4;
  --primary-soft:#e6eefb;
  --primary-ink:#ffffff;
  --accent:#2f74d6;
  --good:#2f7d3f; --good-soft:#e7f1e8;
  --warn:#b5852a; --warn-soft:#f6eed7;
  --info:#3a6ea5; --info-soft:#e6eef6;
  --shadow-sm:0 1px 2px rgba(20,34,58,.06),0 1px 3px rgba(20,34,58,.05);
  --shadow:0 2px 8px rgba(20,34,58,.07),0 8px 24px rgba(20,34,58,.06);
  --shadow-lg:0 12px 40px rgba(20,34,58,.14),0 4px 12px rgba(20,34,58,.08);
  --shadow-red:0 8px 26px rgba(0,72,168,.26);
  --ring:0 0 0 3px rgba(0,72,168,.18);
  --chart-grid:#e6ecf3;
  --sk-base:#e9eef4; --sk-shine:#f5f8fc;

  /* categorical palette (charts) — azul + aco + apoio */
  --c1:#0048A8; --c2:#607890; --c3:#3b8fd6; --c4:#5b8a72; --c5:#8aa0c0;
  --c6:#2a6b9c; --c7:#94a3b8; --c8:#c9a24a;

  /* ---- scale ---- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px;

  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-num:"Segoe UI Variable Text","SF Mono",ui-monospace,"Segoe UI",system-ui,sans-serif;

  --t-fast:.16s cubic-bezier(.2,.7,.2,1);
  --t:.28s cubic-bezier(.2,.7,.2,1);
  --t-slow:.5s cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --z-nav:60; --z-sheet:80; --z-modal:90; --z-toast:100; --z-present:120;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);

  --bottomnav-h:64px;
  --sidebar-w:248px;
  --sidebar-w-collapsed:88px;
  --topbar-h:60px;
  --maxw:1360px;
}

/* ---- dark theme ---- */
:root[data-theme="dark"]{
  /* COMMAND CENTER (ref. imagem 1): navy profundo + glow teal + acento ciano */
  --bg:#070c17;
  --bg-2:#04070e;
  --bg-grad:radial-gradient(120% 85% at 90% -8%,#132747 0%,#070c17 50%);
  --surface:#101a2d;
  --surface-2:#15223a;
  --surface-3:#1c2a46;
  --text:#e9f0fb;
  --text-2:#9fb2ce;
  --text-3:#6c7fa0;
  --border:#1f2e49;
  --border-2:#2b3c5c;
  --primary:#3b82f6;
  --primary-2:#22d3ee;
  --primary-soft:#0f2036;
  --primary-ink:#ffffff;
  --accent:#22d3ee;
  --good:#66b06e; --good-soft:#16241a;
  --warn:#d6a94b; --warn-soft:#2a2410;
  --info:#6f9fd0; --info-soft:#121e2a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 14px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 18px 50px rgba(0,0,0,.6);
  --shadow-red:0 10px 30px rgba(59,130,224,.30);
  --ring:0 0 0 3px rgba(59,130,224,.28);
  --chart-grid:#1b2740;
  --sk-base:#152036; --sk-shine:#1e2b45;
  --c1:#3b82e0; --c2:#8aa0c0; --c3:#5aa0e0; --c4:#7fb08c; --c5:#a9bad6;
  --c6:#4f8fc0; --c7:#9aa8bd; --c8:#e0c06a;
}

/* auto dark if user prefers and no explicit choice */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#0b1120; --bg-2:#070c17;
    --bg-grad:radial-gradient(140% 90% at 100% 0%,#0f1a30 0%,#0b1120 46%);
    --surface:#111a2b; --surface-2:#152036; --surface-3:#1b2740;
    --text:#e9eff7; --text-2:#9fb0c6; --text-3:#6d7f96;
    --border:#22304a; --border-2:#2f3f5c;
    --primary:#3b82e0; --primary-2:#2f74d6; --primary-soft:#0e1b33;
    --accent:#5aa0e0; --good:#66b06e; --warn:#d6a94b; --info:#6f9fd0;
    --shadow:0 4px 14px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.4);
    --shadow-lg:0 18px 50px rgba(0,0,0,.6);
    --shadow-red:0 10px 30px rgba(59,130,224,.30);
    --ring:0 0 0 3px rgba(59,130,224,.28); --chart-grid:#1b2740;
    --sk-base:#152036; --sk-shine:#1e2b45;
    --c1:#3b82e0; --c2:#8aa0c0; --c3:#5aa0e0; --c4:#7fb08c; --c5:#a9bad6; --c6:#4f8fc0; --c7:#9aa8bd; --c8:#e0c06a;
  }
}