/* ============================================================
   tokens.css — ClinicaBO3 Design Tokens (Modern Slate & Calm Teal)
   Inspirado no Linear, Stripe e Apple Human Interface Guidelines.
   Design Calmo: Zero fadiga visual, contraste equilibrado, fontes sans neutras.
   ============================================================ */

/* Inter auto-hospedada (achado 2026-10-13): antes carregada do CDN público da Google
   Fonts, o que avisava esse serviço externo em cada acesso ao sistema clínico. Ficheiro
   variável único por subconjunto (wght 400–700 cobre todos os pesos usados nesta folha
   de estilos) — a mesma técnica usada pela própria Google Fonts internamente. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Tipografia Neutra e Ultra-Legível --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* --- Cores de Superfície & Fundo (Slate Neutro) --- */
  --bg: #f8fafc;              /* Slate 50 — fundo de tela suave e relaxante */
  --surface: #ffffff;         /* Branco puro para cards e sidebar */
  --surface-2: #f1f5f9;       /* Slate 100 — hover e superfícies secundárias */
  --surface-3: #e2e8f0;       /* Slate 200 — divisores e fundos terciários */

  /* --- Linhas & Bordas Sutis --- */
  --border: #e2e8f0;          /* Slate 200 — bordas nítidas de 1px */
  --border-subtle: #edf2f7;   /* Linhas quase invisíveis */
  --border-focus: #0d9488;    /* Teal 600 — anel de foco acessível */

  /* --- Cores de Texto (Hierarquia Tipográfica Clara) --- */
  --ink: #0f172a;             /* Slate 900 — texto principal com contraste ótimo */
  --ink-soft: #475569;        /* Slate 600 — texto secundário calmo */
  --ink-faint: #94a3b8;       /* Slate 400 — placeholders e legendas */
  --ink-inverted: #ffffff;

  /* --- Identidade & Acentos de Ação (Calm Teal / Emerald) --- */
  --brand: #0f766e;           /* Teal 700 — acento clínico nobre e calmo */
  --brand-hover: #115e59;     /* Teal 800 */
  --brand-light: #f0fdfa;     /* Teal 50 — background de itens selecionados */
  --brand-border: #ccfbf1;    /* Teal 100 */
  --brand-fg: #ffffff;        /* Texto/ícones sobre var(--brand) — contraste AA garantido */

  /* --- Cores Semânticas Suaves (Não Agressivas) --- */
  --ok: #15803d;              /* Green 700 */
  --ok-bg: #f0fdf4;           /* Green 50 */
  --ok-border: #bbf7d0;       /* Green 200 */

  --warn: #b45309;            /* Amber 700 */
  --warn-bg: #fffbeb;         /* Amber 50 */
  --warn-border: #fde68a;     /* Amber 200 */

  --err: #b91c1c;             /* Red 700 */
  --err-bg: #fef2f2;          /* Red 50 */
  --err-border: #fecaca;      /* Red 200 */

  /* --- Espaçamento Harmónico (Escala 4px) --- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s8: 48px;

  /* --- Raios de Curvatura Modernos --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-full: 9999px;

  /* --- Sombras Sutis (Soft Elevation) --- */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);

  /* --- Layout Canvas --- */
  --maxw: 1200px;
}

/* Reset Global e Base Tipográfica */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
}