/* ==========================================================================
   ProntDent — Design System ("Adaptive Clinical Workspace")
   Fonte única de verdade para cor, tipografia, espaçamento, elevação e motion.
   Cada página consome os tokens --pd-* / --ws-* abaixo; o valor real muda num
   único lugar. Convenção: --pd-* = nomes herdados (compatibilidade com as
   páginas já migradas); --ws-* = camada semântica nova (workspace/odontograma/
   command center e qualquer tela nova daqui em diante).

   Breakpoints (documentado aqui pois custom property não entra em @media):
     mobile:  até 640px       tablet: 641–1024px
     desktop: 1025–1440px     wide:   acima de 1440px
   ========================================================================== */
:root{
  /* ---- cor semântica (modo claro) ---- */
  --ws-bg:#f5f7f6;
  --ws-surface:#ffffff;
  --ws-surface-2:#eef2f0;
  --ws-border:#dde4e1;
  --ws-border-strong:#c3cdc9;
  --ws-text:#111b19;
  --ws-text-muted:#5c6b67;
  --ws-text-faint:#8b978f;
  --ws-accent:#0b5563;
  --ws-accent-strong:#083f4a;
  --ws-accent-soft:#e2eef0;
  --ws-success:#1f7a4d;
  --ws-success-bg:#e6f4ec;
  --ws-warning:#a6650f;
  --ws-warning-bg:#faf0e0;
  --ws-danger:#b23a2e;
  --ws-danger-bg:#fbebe9;

  /* ---- tipografia ---- */
  --font-ui:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- espaçamento (base 4px) ---- */
  --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:48px; --sp-10:64px;

  /* ---- raio ---- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;

  /* ---- elevação (sutil por design — reservar --ev-3 para modal/popover) ---- */
  --ev-1:0 1px 2px rgba(15,35,32,.05), 0 1px 1px rgba(15,35,32,.04);
  --ev-2:0 2px 10px -3px rgba(15,35,32,.12);
  --ev-3:0 16px 40px -16px rgba(15,35,32,.24);

  /* ---- motion ---- */
  --mo-fast:120ms; --mo-base:180ms; --mo-slow:240ms;
  --mo-ease:cubic-bezier(.22,.72,.28,1);

  /* ---- aliases herdados (login/platform/settings/ferramentas avulsas) ---- */
  --pd-navy:var(--ws-text);
  --pd-navy-deep:var(--ws-accent-strong);
  --pd-ink:var(--ws-text);
  --pd-muted:var(--ws-text-muted);
  --pd-line:var(--ws-border);
  --pd-primary:var(--ws-accent);
  --pd-primary-dark:var(--ws-accent-strong);
  --pd-danger:var(--ws-danger);
  --pd-ok:var(--ws-success);
  --pd-ok-bg:var(--ws-success-bg);
  --pd-warn:var(--ws-warning);
  --pd-success:var(--ws-success);
  --pd-ground:var(--ws-bg);
  --pd-surface:var(--ws-surface);
  --pd-surface-2:var(--ws-surface-2);
  --pd-mint:var(--ws-accent-soft);
  --pd-mint-line:var(--ws-border-strong);
  --pd-radius:var(--r-lg);
  --pd-shadow-sm:var(--ev-1);
  --pd-shadow-lg:var(--ev-3);
  --pd-font-display:var(--font-ui);
  --pd-font-body:var(--font-ui);
}

/* Modo escuro real — superfícies e texto migrados, não apenas invertidos.
   Ativado por @media (respeitando escolha explícita via [data-theme]) e por
   toggle manual via [data-theme="dark"]. As páginas herdadas (login/platform/
   settings/ferramentas) já usam só variáveis para fundo, então o escuro
   agora liga com segurança nelas; a página nova (odontograma-visual) foi
   escrita 100% em tokens desde o início. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ws-bg:#0e1413;
    --ws-surface:#161d1c;
    --ws-surface-2:#1c2422;
    --ws-border:#2a3331;
    --ws-border-strong:#3a4442;
    --ws-text:#e8ede9;
    --ws-text-muted:#9fada8;
    --ws-text-faint:#71807b;
    --ws-accent:#3fb0be;
    --ws-accent-strong:#63c6d2;
    --ws-accent-soft:#173236;
    --ws-success:#4cbf8b;
    --ws-success-bg:#123626;
    --ws-warning:#e2a03f;
    --ws-warning-bg:#3a2c14;
    --ws-danger:#e0685c;
    --ws-danger-bg:#3a1e1a;
    --ev-1:0 1px 2px rgba(0,0,0,.4);
    --ev-2:0 2px 10px -3px rgba(0,0,0,.5);
    --ev-3:0 16px 40px -16px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --ws-bg:#0e1413;
  --ws-surface:#161d1c;
  --ws-surface-2:#1c2422;
  --ws-border:#2a3331;
  --ws-border-strong:#3a4442;
  --ws-text:#e8ede9;
  --ws-text-muted:#9fada8;
  --ws-text-faint:#71807b;
  --ws-accent:#3fb0be;
  --ws-accent-strong:#63c6d2;
  --ws-accent-soft:#173236;
  --ws-success:#4cbf8b;
  --ws-success-bg:#123626;
  --ws-warning:#e2a03f;
  --ws-warning-bg:#3a2c14;
  --ws-danger:#e0685c;
  --ws-danger-bg:#3a1e1a;
  --ev-1:0 1px 2px rgba(0,0,0,.4);
  --ev-2:0 2px 10px -3px rgba(0,0,0,.5);
  --ev-3:0 16px 40px -16px rgba(0,0,0,.65);
}