/* =====================================================================
   W3 FLEX · Tokens de design — fundação sem build
   ---------------------------------------------------------------------
   Camada semântica única, carregada ANTES de app.css e mapeada para as
   variáveis do Bootstrap/Tabler (não brigar com o vendor).
   Base de código/estética: Tabler (Bootstrap 5, MIT). Princípios:
   shadcn/ui (arquitetura de tokens), IBM Carbon (escalas numéricas),
   Shopify Polaris (valores por componente), Open Props (tokens em CSS).

   REGRA DE MARCA (WCAG, medida): #00B5D9 sobre branco = 2.44:1 → REPROVA.
   → Ciano SÓ como PREENCHIMENTO com texto #03171C por cima (7.53:1).
   → Texto/link usa --link (#0B7286 = 5.6:1); corpo usa --fg (#33505B = 8.6:1).
   ===================================================================== */

/* ---- Fontes da marca (self-hosted, sem CDN; subset latin) ---- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/space-grotesk-600.woff2") format("woff2")}

:root {
  /* ---- Tipografia da marca ---- */
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font-body);
  --shadow-brand: 0 16px 30px -14px rgba(0,147,180,.6);   /* sombra ciano dos CTAs (site da W3) */

  /* ---- Cores semânticas (papéis, não hex avulso) ---- */
  --bg:            #EAF6F9;   /* fundo da aplicação */
  --surface:       #ffffff;   /* card / superfície */
  --fg-strong:     #03171C;   /* títulos, valores, KPI (≥7:1) */
  --fg:            #33505B;   /* corpo, células de tabela (8.6:1) */
  --fg-muted:      #54707D;   /* labels, hints, secundário (≥4.5:1 nos 2 fundos) */
  --border:        #E3EBEE;   /* hairline de card/tabela */
  --border-strong: #CBDBE1;
  --primary:       #00B5D9;   /* acento — SÓ como fill de área grande */
  --primary-ink:   #03171C;   /* texto sobre o fill ciano (7.53:1) */
  --primary-strong:#0299B8;   /* hover do fill */
  --link:          #0B7286;   /* texto de link (5.58:1 / 5.06:1) */
  --link-hover:    #0A5A6B;
  --ring:          rgba(0, 181, 217, .55);

  /* ---- Status: tint suave + texto escuro da mesma família (nunca só cor) ---- */
  --status-neutral-bg:#EEF2F4; --status-neutral-fg:#3B4B52;
  --status-warn-bg:   #FFF3E0; --status-warn-fg:   #8A5300;
  --status-ok-bg:     #E6F6EC; --status-ok-fg:     #1E7A3D;
  --status-danger-bg: #FCEBE9; --status-danger-fg: #A32219;

  /* ---- Espaçamento (grid 4/8 — só estes degraus) ---- */
  --sp-3xs:2px; --sp-2xs:4px; --sp-xs:8px;  --sp-sm:12px; --sp-md:16px;
  --sp-lg:24px; --sp-xl:32px; --sp-2xl:40px; --sp-3xl:48px; --sp-4xl:64px;

  /* ---- Tipografia (base 14px = .875rem, padrão Tabler) ---- */
  --fs-xs:.75rem;   --fs-sm:.875rem; --fs-md:1rem;    --fs-lg:1.125rem;
  --fs-xl:1.25rem;  --fs-2xl:1.5rem; --fs-3xl:1.875rem;

  /* ---- Raio (um por escala) ---- */
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;

  /* ---- Elevação (leve; prefira hairline a sombra pesada) ---- */
  --shadow-sm:0 1px 2px rgba(3,23,28,.06);
  --shadow-md:0 2px 4px rgba(3,23,28,.08);
  --shadow-lg:0 8px 24px rgba(3,23,28,.12);

  /* ---- Mapeamento para o vendor (Bootstrap/Tabler) ---- */
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-lg);
  --bs-primary: var(--primary);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --tblr-primary: var(--primary);
  --tblr-border-color: var(--border);
  --tblr-font-sans-serif: var(--font-body);
  --tblr-body-font-family: var(--font-body);
  --bs-font-sans-serif: var(--font-body);
  --tblr-font-serif: var(--font-display);
}

/* Base de corpo e títulos com a tipografia da marca (admin). */
body { font-family: var(--font-body); }
.page-title, .card-title, .h1, .h2, .h3, h1, h2, h3,
.stat-value, .empty-title, .navbar-brand { font-family: var(--font-display); letter-spacing: -.01em; }