/* ============================================================
   Inter self-hosted — exigência da norma A.4 da SYS Manager.
   MEDIDO em 12/08/2026: o repo tinha **0** `@font-face` e a stack punha "Inter" em
   5ª posição, atrás de SF Pro — ou seja renderizava SF Pro SEMPRE, e a norma ficava
   no papel. Self-hosted (não Google Fonts) porque a CSP dos 2 sites é
   `default-src 'self'` e origem externa quebraria em produção, em silêncio.
   Licença: SIL OFL 1.1 (ver Inter-OFL.txt) — permite hospedar e redistribuir.
   4 pesos, subset latin, ~24 KB cada. `font-display:swap` para o texto aparecer
   já na 1ª pintura, com o fallback, em vez de bloquear.
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');}

/* ============================================================
   Otz.ai by Aimi Digital — Design Tokens (v1 · Apple-grade)
   Paleta e tipografia inspiradas na Apple. Em dispositivos Apple,
   a fonte do sistema resolve para SF Pro automaticamente.
   ============================================================ */
:root{
  /* Tipografia — system stack (SF Pro em Apple), tabular para números */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;

  /* Cores neutras (Apple) */
  --ink:#1d1d1f;       /* near-black da Apple */
  --ink-2:#6e6e73;     /* cinza secundário */
  --ink-3:#6f6f76;     /* cinza terciário — UX-S6: ~4.6:1 em #fff (AA), antes #86868b ~3.5:1 */
  --bg:#ffffff;
  --bg-2:#f5f5f7;      /* cinza Apple */
  --bg-3:#fbfbfd;
  --line:#d2d2d7;      /* hairline */
  --line-2:#e8e8ed;
  --card:#ffffff;

  /* Acento da marca — usado com parcimônia */
  --accent:#0066b2; --accent-2:#ec348e; --accent-ink:#00538F; --accent-wash:#f0f6fa; --accent-line:#c7ddee;
  --link:#0066b2;
  /* Papéis da marca SYS: azul é a TINTA (link/ícone/ativo), rosa é o CTA, violeta é o 3º */
  --cta:var(--sys-cta); --cta-hover:var(--sys-cta-hover); --on-accent:#ffffff;
  --violet:var(--sys-violet-ink); --violet-wash:#f3efff;

  /* Status (mudos, maduros) */
  --green:#1a7f37; --green-wash:#eaf6ee;
  --amber:#9a6700; --amber-wash:#fbf4e6;
  --red:#b3261e;   --red-wash:#fbecec;
  --cyan:#0a7ea4;  --blue:#1c63d4;
  /* DEM-52 — semáforo de prazo/urgência (4 níveis distintos) */
  --flag-green:var(--green);  --flag-green-wash:var(--green-wash);
  --flag-yellow:#8a6d00;      --flag-yellow-wash:#fff8db;
  --flag-orange:#c2410c;      --flag-orange-wash:#ffece0;
  --flag-red:var(--red);      --flag-red-wash:var(--red-wash);

  /* Gradientes — muito sutis (só onde fizer sentido) */
  --grad-brand:linear-gradient(135deg,#00538F,#0072BC);   /* logo/avatar apenas */
  --grad-hero:linear-gradient(180deg,#fbfbfd 0%,#ffffff 100%);
  --grad-wash:linear-gradient(180deg,#f5f5f7 0%,#ffffff 100%);

  /* Sombras — discretas */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 2px 10px rgba(0,0,0,.05);
  --shadow-lg:0 12px 40px rgba(0,0,0,.08);
  --shadow-xl:0 24px 70px rgba(0,0,0,.12);

  /* Raio — Apple usa 12–28 */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-full:980px;

  /* Espaçamento (4px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-section:120px;

  /* Tipografia — escala tensa estilo SF Pro Display */
  --fs-caption:.8125rem;   /* 13 */
  --fs-sm:.875rem;         /* 14 */
  --fs-base:1.0625rem;     /* 17 — corpo Apple */
  --fs-md:1.1875rem;       /* 19 */
  --fs-lg:1.5rem;          /* 24 */
  --fs-xl:2rem;            /* 32 */
  --fs-2xl:2.75rem;        /* 44 */
  --fs-3xl:clamp(2.6rem,5.5vw,4.2rem); /* hero */

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --t:.22s var(--ease); --t-slow:.5s var(--ease-out);

  --maxw:1080px; --maxw-wide:1280px; --nav-h:48px;

  /* --- Aliases de compatibilidade (páginas v0 usam estes nomes em styles inline) --- */
  --purple:var(--violet); --purple-l:#8f6ae0; --purple-d:var(--violet); --purple-50:var(--violet-wash); --purple-100:var(--violet-wash);
  --green-50:var(--green-wash); --amber-50:var(--amber-wash); --red-50:var(--red-wash);
  --pink:var(--accent-2); --text:var(--ink); --text-2:var(--ink-2); --text-3:var(--ink-3);
  --border:var(--line); --border-2:var(--line-2); --bg2:var(--bg-2);
  --grad-brand-soft:var(--grad-wash); --shadow-sm:var(--shadow-xs);
  --fs-xs:var(--fs-caption);

/* TOKENS:INICIO — GERADO por scripts/gen-tokens.mjs (npm run tokens). NÃO editar à mão. */
  /* ── Borda de CONTROLE (WCAG 2.2 §1.4.11 exige 3:1) ──────────────────────
     O `--line` decorativo dá 1,51 e NÃO serve para identificar controle.
     Nome é `--border-control` e não `--line-strong`: esse já existe no cockpit
     valendo #d2d2d7 (1,51), o OPOSTO — A-017, nome novo não é lugar vazio.
     Valores medidos contra a PIOR superfície do tema, não contra branco. */
  --border-control:#86868b; /* 3,33 na PIOR superficie clara (--bg-2) */

  /* ── PALETA SYS MANAGER — EM USO desde 12/08/2026 (D-3 REVOGADA pelo Owner) ───────────
     Papéis, conforme a decisão O-7: `--accent` é o AZUL SYS e é o PRIMÁRIO (70% da
     hierarquia do Anexo A); `--cta` é o rosa de DESTAQUE (20%), 1 por viewport, na
     classe `.btn-cta`; `--violet` é o 3º. Inverter isso põe rosa em 227 botões de
     74 telas — medido — e contradiz "foco no azul da SYS".
     Cada cor tem 2 versões — SUPERFÍCIE (piso 3:1, nunca texto) e
     TINTA `-ink` (piso 4,5:1, texto/ícone/fill com rótulo branco). */
  --sys-pink-decorative:#ec348e; /* 4,18 — dot/gráfico/ilustração, NUNCA texto */
  --sys-navy:#1A2740; /* 14,91 — superfície elevada */
  --sys-navy-2:#0F1725; /* superfície elevada, dark */
  --sys-cta:#d42f80; /* 6,02 — fill do CTA com rótulo branco */
  --sys-cta-hover:#cb2d7a; /* 7,02 — hover; e tinta rosa sobre claro */
  --sys-cta-dark:#ee4497; /* 4,92 sobre --card no dark */
  --sys-violet-ink:#6D3BDB; /* 6,37 — É o mesmo hex do roxo da marca atual */
  --sys-blue-ink:#00538F; /* 7,97 */
  --sys-teal-ink:#00707A; /* 5,84 */
  --sys-amber-ink:#8A6A00; /* 5,07 — ⚠️ lê OLIVA, não amarelo (D-6) */
  --sys-green-ink:#0A7A55; /* 5,35 */
  --sys-red-ink:#C42222; /* 5,83 */
  --sys-info:#175CD3; /* 5,99 */
  --sys-border-control:#8d8581; /* 3,32 na PIOR superficie clara, neutro quente SYS */
  --sys-ink-2:#635C58; /* 6,56 */
  --sys-ink-3:#6B6460; /* 5,81 */
  --sys-violet-mark:#8B5CF6; /* MARCA, nao texto — logo do Aimi; matiz 258,3° (= violet-ink) */
  --sys-taupe:#524a48; /* neutro quente medido no site da SYS — superficie/borda, nao texto */

  /* ── Rótulo sobre fill (SPEC-40 D-5) ─────────────────────────────────────
     NUNCA escreva `#fff` em par com um token de fundo: com o acento escuro
     do dark o rótulo cai para 2,56:1 (bug real em artes/base.css:56). */
  --on-cta:#ffffff; /* 6,02 sobre --sys-cta */
  --on-cta-dark:#0F1725; /* 5,42 sobre --sys-cta-dark (branco daria 3,31 ✗) */
  --on-navy:#ffffff; /* 14,91 sobre --sys-navy */
/* TOKENS:FIM */
}

/* BackOffice — acento mais sóbrio (azul-petróleo) p/ diferenciar do app do cliente */
[data-app="backoffice"]{ --cta:#0a6e8f; --cta-hover:#075e79; --on-cta:#ffffff; --accent:#0a6e8f; --accent-2:#0a7ea4; --accent-ink:#075e79; --accent-wash:#eef7fb; --accent-line:#d4e9f1; --link:#0a6e8f; }

/* ============================================================
   Tema escuro (toggle no header da plataforma — D17). Tudo via
   tokens, então cards/grids/menus herdam automaticamente.
   ============================================================ */
[data-theme="dark"]{
  --ink:#f5f5f7; --ink-2:#a1a1a6; --ink-3:#9a9aa0; /* UX-S6: terciário mais legível no escuro */
  --bg:#161618; --bg-2:#202022; --bg-3:#1b1b1d;
  --line:#3a3a3d; --line-2:#2a2a2d; --card:#1e1e20;
  --accent:#428ec7; --accent-2:#6ea9d6; --accent-ink:#8fc3e6; --accent-wash:#10202c; --accent-line:#1c3646;
  --link:#8fc3e6;
  --cta:var(--sys-cta); --cta-hover:var(--sys-cta-hover);
  --violet:var(--sys-violet-ink); --violet-wash:#1c1630; --on-accent:#0F1725;
  --green:#3fb950; --green-wash:#13241a;
  --amber:#d29922; --amber-wash:#2a2210;
  --red:#f85149;   --red-wash:#2a1614;
  --cyan:#39c0d9;  --blue:#4d8df0;
  /* DEM-52 — semáforo de prazo (dark) */
  --flag-yellow:#e3c14e; --flag-yellow-wash:#26210f;
  --flag-orange:#f0883e; --flag-orange-wash:#2a1810;
  --grad-hero:linear-gradient(180deg,#1b1b1d 0%,#161618 100%);
  --grad-wash:linear-gradient(180deg,#202022 0%,#161618 100%);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 12px rgba(0,0,0,.5); --shadow-lg:0 12px 40px rgba(0,0,0,.55); --shadow-xl:0 24px 70px rgba(0,0,0,.62);

/* TOKENS-DARK:INICIO — GERADO por scripts/gen-tokens.mjs. NÃO editar à mão. */
  /* Borda de controle no escuro: medida contra a PIOR superfície dark. */
  --border-control:#6e6e73; /* 3,21 na PIOR superficie dark (--bg-2) */

  /* ── As MESMAS tintas SYS, derivadas para o escuro (SPEC-40 D-8) ──────────
     Sem estes overrides as 11 tintas valeriam o hex claro no dark e reprovariam
     de 2,09 a 3,28 — token que promete AA e entrega 2,09 é armadilha. Cada uma
     clareada na MESMA matiz até passar 4,5:1 na pior superfície escura (que é a
     mais CLARA delas: texto claro perde contraste quando o fundo clareia). */
  --sys-cta:#cd62a0; /* 4,53 na pior superficie dark */
  --sys-cta-hover:#c26c9e; /* 4,59 */
  --sys-violet-ink:#9672e5; /* 4,52 */
  --sys-blue-ink:#578db5; /* 4,56 */
  --sys-teal-ink:#42959d; /* 4,56 */
  --sys-amber-ink:#9f852e; /* 4,55 — segue lendo oliva (D-6) */
  --sys-green-ink:#40977a; /* 4,59 */
  --sys-red-ink:#d66464; /* 4,54 */
  --sys-info:#5386de; /* 4,52 */
  --sys-ink-2:#8c8683; /* 4,53 */
  --sys-ink-3:#8c8683; /* 4,53 — converge com ink-2 no dark */

  /* Rótulo sobre o CTA no escuro: NAVY, não branco (branco daria 3,31). */
  --on-cta:#0F1725; /* 5,42 sobre --sys-cta do dark */
/* TOKENS-DARK:FIM */
}
/* BackOffice mantém o acento ciano também no escuro */
[data-theme="dark"][data-app="backoffice"]{ --cta:#39c0d9; --cta-hover:#5ccfe6; --on-cta:#0F1725; --accent:#39c0d9; --accent-2:#5ccfe6; --accent-ink:#8fdcec; --accent-wash:#0e2630; --accent-line:#1a3a47; --link:#5ccfe6; }
/* Barras translúcidas precisam de base escura (sobrescreve o branco fixo) */
[data-theme="dark"] .topbar{ background:rgba(22,22,24,.8); }
[data-theme="dark"] .subnav{ background:rgba(22,22,24,.86)!important; }
[data-theme="dark"] .nav{ background:rgba(22,22,24,.82); }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#48484c; border-color:var(--bg); }
[data-theme="dark"] .avatar-img{ background:var(--grad-brand); }
html{ background:var(--bg); }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:var(--fs-base);line-height:1.47;font-weight:400;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
a{color:var(--link);text-decoration:none;}a:hover{text-decoration:underline;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--accent-wash);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:#c7c7cc;border-radius:99px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#a1a1a6;}
hr{border:none;border-top:1px solid var(--line);}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}