/* ==========================================================================
   tokens.css — Design System: Anamnese
   NIT-CEUNSP · Identidade Saci terra-quente · Light mode editorial
   --------------------------------------------------------------------------
   Ordem: imports de fontes → reset → variáveis (tokens) → utilitárias base
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTES
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------------
   2. RESET / NORMALIZE (modern-normalize enxuto)
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; line-height: 1.5; }
hr { height: 0; color: inherit; }
abbr[title] { text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { border-color: inherit; text-indent: 0; border-collapse: collapse; }
button, input, optgroup, select, textarea {
  font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;
}
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; }
::-moz-focus-inner { border-style: none; padding: 0; }
:-moz-focusring { outline: 1px dotted ButtonText; }
legend { padding: 0; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; }
button { cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   3. TOKENS (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
  /* ---- 3.1 PALETA — Marca terra-quente Saci ---- */
  --color-navy:           #1F1912; /* texto principal, headings */
  --color-terra:          #B4432A; /* primária */
  --color-terra-claro:    #D86547; /* hover, accent */
  --color-terra-soft:     #F4E2DA; /* item ativo sidebar, hover sutil */

  /* ---- 3.2 PALETA — Neutros ---- */
  --color-bg-app:         #FAF7F2;
  --color-bg-card:        #FFFFFF;
  --color-bg-row-alt:     #F5F0E8;
  --color-border:         #E8E0D4;
  --color-border-strong:  #D4C8B5;
  --color-text:           #2D241B;
  --color-text-mute:      #7A6D5E;
  --color-text-faint:     #B5A99A;

  /* ---- 3.3 PALETA — Estados (semântica clínica) ---- */
  --color-success:        #4A7C59;
  --color-success-soft:   #E4EDE2;
  --color-warning:        #C8893E;
  --color-warning-soft:   #F8ECDA;
  --color-danger:         #A53A2A;
  --color-danger-soft:    #F4DAD3;
  --color-info:           #5C7A8C;
  --color-info-soft:      #E0E7EC;

  /* ---- 3.4 PALETA — Classificação clínica (Verde→Vermelho do D0) ---- */
  --class-verde:          #4A7C59;
  --class-verde-soft:     #E4EDE2;
  --class-amarelo:        #D4A847;
  --class-amarelo-soft:   #FAF1D9;
  --class-laranja:        #C8632F;
  --class-laranja-soft:   #F8DDC9;
  --class-vermelho:       #8B2E1F;
  --class-vermelho-soft:  #F2D2CC;

  /* ---- 3.5 SOMBRAS ---- */
  --shadow-card:  0 1px 2px rgba(31,25,18,0.04), 0 1px 1px rgba(31,25,18,0.02);
  --shadow-elev:  0 4px 12px rgba(31,25,18,0.08);
  --shadow-modal: 0 16px 48px rgba(31,25,18,0.18);
  --shadow-focus: 0 0 0 3px rgba(180,67,42,0.18);

  /* ---- 3.6 TIPOGRAFIA ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  --leading-tight:   1.25;
  --leading-base:    1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-wide:  0.05em;
  --tracking-wider: 0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- 3.7 ESPAÇAMENTO (escala 4px) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- 3.8 BORDER-RADIUS ---- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* ---- 3.9 LAYOUT (medidas estruturais) ---- */
  --header-height:        64px;
  --sidebar-collapsed:    64px;
  --sidebar-expanded:     240px;
  --content-max-width:    1440px;

  /* ---- 3.10 TRANSIÇÕES ---- */
  --transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- 3.11 Z-INDEX ---- */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 500;
  --z-header:   1000;
  --z-overlay:  2000;
  --z-modal:    2100;
  --z-toast:    3000;
}

/* --------------------------------------------------------------------------
   4. ELEMENT DEFAULTS (aplicação dos tokens)
   -------------------------------------------------------------------------- */
html {
  height: 100%;
}
/* body com min-height (não height fixo) para que o scroll aconteça no <body>
   e position:sticky no .app-header funcione corretamente. */
body {
  min-height: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text);
  background-color: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--color-navy);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-3) 0; }

a {
  color: var(--color-terra);
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-terra-claro); }

::selection {
  background: var(--color-terra-soft);
  color: var(--color-navy);
}

/* foco acessível padrão */
:focus-visible {
  outline: 2px solid var(--color-terra);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* utilitárias mínimas (use com moderação) */
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.u-mono { font-family: var(--font-mono); }
.u-display { font-family: var(--font-display); }
.u-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  color: var(--color-text-mute);
  font-weight: var(--weight-semibold);
}