/* Fonte Inter self-hosted (antes vinha do Google Fonts por CDN). Trazer pra dentro mantém a CSP
   restrita a 'self', elimina a dependência de um CDN externo e evita vazar o IP do usuário para o
   Google a cada visita - um ponto de privacidade/LGPD relevante num sistema de saúde. A Inter é
   uma fonte variável, então um único arquivo por subconjunto cobre os pesos 400-600. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  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+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   TEMAS
   ----------------------------------------------------------------------------
   Cada tema define apenas as cores BASE abaixo. Os tons intermediários (tintas,
   hover, bordas fortes) são derivados com color-mix mais adiante, uma vez só -
   assim um tema novo entra com ~24 linhas em vez de 60, e nenhum tom fica
   dessincronizado do seu tema.

   Todos os valores foram auditados: texto >= 4.5:1 sobre o seu fundo em todos
   os temas. As bordas ficam discretas (~1.55:1) de propósito - são separação
   visual, não texto.
   ========================================================================= */

:root,
:root[data-tema="sereno"] {
  --bg:#F2F8F8; --surface:#FFFFFF; --surface-2:#EAF3F3;
  --text:#122E32; --text-muted:#567174;
  --line:#BBD4D2;
  --primary:#0C7C82; --primary-hover:#0A6A6F; --on-primary:#FFFFFF;
  --rail-bg:#0C3A3E; --rail-ink:#9FC4C4; --rail-on:#0D8288; --rail-on-ink:#FFFFFF; --rail-brand:#FFFFFF;
  --ok:#0B6E52; --ok-bg:#D8F2E8;
  --warn:#856611; --warn-bg:#FBF0D2;
  --danger:#A8332F; --danger-bg:#FBDEDC;
  --previsto:#4B62B8;
  color-scheme: light;
}

:root[data-tema="lotus"] {
  --bg:#F8F0E8; --surface:#FFFCF7; --surface-2:#F3EADD;
  --text:#3A2E1C; --text-muted:#716147;
  --line:#DCCBB0;
  --primary:#896722; --primary-hover:#6E5119; --on-primary:#FFFFFF;
  --rail-bg:#2E2617; --rail-ink:#BFAE8E; --rail-on:#896722; --rail-on-ink:#FFF8EA; --rail-brand:#D2AE54;
  --ok:#44631F; --ok-bg:#E4EFD0;
  --warn:#816311; --warn-bg:#F5E7C4;
  --danger:#9C3A32; --danger-bg:#F6DAD5;
  --previsto:#7A5A8E;
  color-scheme: light;
}

:root[data-tema="grafite"] {
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#EBEEF1;
  --text:#151C25; --text-muted:#5D6875;
  --line:#CAD0D9;
  --primary:#243447; --primary-hover:#16212E; --on-primary:#FFFFFF;
  --rail-bg:#1A2430; --rail-ink:#A9B5C1; --rail-on:#2E4257; --rail-on-ink:#FFFFFF; --rail-brand:#E8B04B;
  --ok:#12694A; --ok-bg:#D7F0E4;
  --warn:#8A6212; --warn-bg:#FAEDD1;
  --danger:#A63127; --danger-bg:#FADEDA;
  --previsto:#4F63A8;
  color-scheme: light;
}

:root[data-tema="ameixa"] {
  --bg:#FAF6F7; --surface:#FFFFFF; --surface-2:#F4EAEE;
  --text:#2C1922; --text-muted:#6E5560;
  --line:#DECAD2;
  --primary:#6B2D4F; --primary-hover:#521F3C; --on-primary:#FFFFFF;
  --rail-bg:#2B1524; --rail-ink:#C4A8B4; --rail-on:#6B2D4F; --rail-on-ink:#FFFFFF; --rail-brand:#E3A6B8;
  --ok:#3F6B3A; --ok-bg:#E2F0DE;
  --warn:#8A6212; --warn-bg:#F8EBCF;
  --danger:#A6303F; --danger-bg:#F9DDE1;
  --previsto:#7A5A9E;
  color-scheme: light;
}

/* No escuro a regra da cor primária se inverte: o âmbar é claro e pede texto ESCURO
   por cima, ao contrário dos temas claros. Por isso --on-primary existe como token
   separado em vez de ser branco fixo. */
:root[data-tema="escuro"] {
  --bg:#12161A; --surface:#1B2026; --surface-2:#232930;
  --text:#E9ECEF; --text-muted:#9AA5B1;
  --line:#374049;
  --primary:#E8B04B; --primary-hover:#F0C069; --on-primary:#1A1400;
  --rail-bg:#0D1114; --rail-ink:#8D99A5; --rail-on:#232930; --rail-on-ink:#E8B04B; --rail-brand:#E8B04B;
  --ok:#5FCF9B; --ok-bg:#12301F;
  --warn:#E5B75A; --warn-bg:#312712;
  --danger:#F0847C; --danger-bg:#361A19;
  --previsto:#8E9BE8;
  color-scheme: dark;
}

/* Modo automático: sem data-tema estampado, segue o sistema operacional.
   O seletor evita vencer uma escolha explícita do usuário. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --bg:#12161A; --surface:#1B2026; --surface-2:#232930;
    --text:#E9ECEF; --text-muted:#9AA5B1;
    --line:#374049;
    --primary:#E8B04B; --primary-hover:#F0C069; --on-primary:#1A1400;
    --rail-bg:#0D1114; --rail-ink:#8D99A5; --rail-on:#232930; --rail-on-ink:#E8B04B; --rail-brand:#E8B04B;
    --ok:#5FCF9B; --ok-bg:#12301F;
    --warn:#E5B75A; --warn-bg:#312712;
    --danger:#F0847C; --danger-bg:#361A19;
    --previsto:#8E9BE8;
    color-scheme: dark;
  }
}

:root {
  /* ---- Tons derivados ----
     Escritos uma vez: cada var() resolve contra o tema vigente, então acompanham
     qualquer paleta sem precisar ser redeclarados. */
  --text-2:      color-mix(in srgb, var(--text) 76%, var(--surface));
  --hover:       color-mix(in srgb, var(--text) 6%, var(--surface));
  --line-forte:  color-mix(in srgb, var(--line) 62%, var(--text));
  --primary-suave:      color-mix(in srgb, var(--primary) 8%,  var(--surface));
  --primary-tint:       color-mix(in srgb, var(--primary) 16%, var(--surface));
  --primary-tint-borda: color-mix(in srgb, var(--primary) 30%, var(--surface));
  --primary-claro:      color-mix(in srgb, var(--primary) 72%, var(--surface));
  --primary-forte:      color-mix(in srgb, var(--primary) 82%, var(--text));
  /* Véu atrás do modal. Precisa ser mais forte no escuro: um véu a 50% sobre um fundo
     já escuro quase não separa o modal do resto da tela. */
  --veu: color-mix(in srgb, #0B1017 52%, transparent);
  --ok-borda:     color-mix(in srgb, var(--ok) 34%, var(--surface));
  --warn-borda:   color-mix(in srgb, var(--warn) 34%, var(--surface));
  --danger-borda: color-mix(in srgb, var(--danger) 34%, var(--surface));

  /* ---- Apelidos legados ----
     O CSS existente usa estes nomes em mais de 300 lugares. Mantê-los como apelidos
     faz tudo acompanhar o tema sem um rename de risco. Código novo deve usar os
     nomes semânticos acima; estes vão saindo conforme os arquivos forem mexidos.
     Atenção: os nomes mentem no tema escuro (--gray-50 é escuro lá) - é o preço
     de não reescrever 300 ocorrências de uma vez. */
  --blue-50:  var(--primary-suave);
  --blue-100: var(--primary-tint);
  --blue-200: var(--primary-tint-borda);
  --blue-400: var(--primary-claro);
  --blue-500: var(--primary);
  --blue-600: var(--primary-hover);
  --blue-800: var(--primary-forte);
  --blue-900: var(--rail-bg);

  --gray-50:  var(--surface-2);
  --gray-100: var(--hover);
  --gray-200: var(--line);
  --gray-300: var(--line-forte);
  --gray-400: var(--text-muted);
  --gray-600: var(--text-2);
  --gray-700: var(--text-2);
  --gray-800: var(--text);
  --gray-900: var(--text);

  --black: var(--text);
  --text-secondary: var(--text);

  --amber-50:  var(--warn-bg);
  --amber-100: var(--warn-bg);
  --amber-600: var(--warn);

  --red-50:  var(--danger-bg);
  --red-100: var(--danger-bg);
  --red-200: var(--danger-borda);
  --red-400: var(--danger);
  --red-600: var(--danger);

  --green-50:  var(--ok-bg);
  --green-100: var(--ok-bg);
  --green-600: var(--ok);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);

  --transition: 0.15s ease;
}

/* Sombras precisam de mais peso no escuro para o relevo continuar perceptível. */
:root[data-tema="escuro"] {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45);
  --veu: color-mix(in srgb, #000 70%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45);
    --veu: color-mix(in srgb, #000 70%, transparent);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }