/* Copiado de VHA-Advocacia/DS v1.3.0 (web/tokens.css) por scripts/vha/sync-tokens.sh. Não edite à mão.
 * Só os seletores do tema escuro mudam: :root.dark, a classe que o Gatus usa. */
/* Gerado por scripts/build.mjs a partir de tokens/tokens.json. Não edite à mão.
 *
 * Preto e branco. A cor só aparece quando informa: sinais (warn, danger, ok) e cores de dado, nunca decoração.
 * Interação é tinta: accent, focus e on-accent apontam para ink e paper.
 * Tema: segue prefers-color-scheme; data-theme="light" ou "dark" na raiz força um deles.
 * Alto contraste: segue prefers-contrast: more; data-contrast="more" na raiz força.
 * Data especial: data-season="<id>" na raiz define --season (o fio de 3px no topo e o ponto ao lado do nome da data).
 */
:root {
  --paper: #ffffff;
  --surface: #ffffff;
  --sunken: #f4f4f4;
  --ink: #000000;
  --ink-muted: #5c5c5c;
  --ink-faint: #737373;
  --rule: #e8e8e8;
  --rule-strong: #cccccc;
  --warn: #9e5700;
  --warn-wash: #fff5e6;
  --danger: #b3261e;
  --danger-wash: #fdeceb;
  --ok: #0b7a3f;
  --ok-wash: #e9f6ee;
  --brand: #777853;

  --accent: var(--ink);
  --accent-wash: var(--sunken);
  --on-accent: var(--paper);
  --focus: var(--ink);

  --display: "Bricolage Grotesque Variable", "Bricolage Grotesque", "Schibsted Grotesk Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Schibsted Grotesk Variable", "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4 Variable", "Source Serif 4", Georgia, "Times New Roman", serif;

  --text-hero: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
  --text-display: clamp(3.25rem, 1.6rem + 7.5vw, 8.5rem);
  --text-headline: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  --text-xl: 1.75rem;
  --text-lg: 1.4rem;
  --text-md: 1.125rem;
  --text-base: 0.9375rem;
  --text-title: 0.9375rem;
  --text-sm: 0.8125rem;
  --text-xs: 0.75rem;
  --text-brand: 1.05rem;
  --text-reading: 1.125rem;
  --text-excerpt: 0.8125rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-control: 999px;
  --radius-pill: 999px;
  --radius-row: 10px;
  --radius-block: 14px;
  --radius-inner: 8px;
  --rule-width: 1px;
  --data-rule-width: 3px;
  --data-dot: 8px;
  --shadow-pop: 0 24px 48px rgba(0, 0, 0, 0.12);
  --motion-fast: 120ms ease;
  --motion-pop: 140ms ease-out;
  --motion-progress: 1300ms linear;
  --motion-spin: 900ms linear;
  --measure: 68ch;
  --index-width: clamp(340px, 26vw, 540px);
  --topbar-height: 52px;
  --gutter-mobile: 16px;
  --doc-nav-width: 264px;
  --doc-toc-width: 232px;
  --doc-max-width: 1480px;

  color-scheme: light;
}


:root.dark {
  --paper: #000000;
  --surface: #000000;
  --sunken: #141414;
  --ink: #ffffff;
  --ink-muted: #a3a3a3;
  --ink-faint: #8a8a8a;
  --rule: #262626;
  --rule-strong: #404040;
  --warn: #f0b450;
  --warn-wash: #2a1f0d;
  --danger: #ff7a6b;
  --danger-wash: #2c1210;
  --ok: #4fbf7f;
  --ok-wash: #0d2318;
  --brand: #bdbea1;
  color-scheme: dark;
}

/* Alto contraste: os cinzas de texto e os fios viram tinta. :root:root empata com as regras do escuro e, por vir
 * depois delas, vence: sem isso, o alto contraste não valeria no tema escuro. */
@media (prefers-contrast: more) {
  :root:root {
    --ink-muted: var(--ink);
    --ink-faint: var(--ink);
    --rule: var(--ink);
    --rule-strong: var(--ink);
    --brand: var(--ink);
  }
}

:root[data-contrast="more"] {
  --ink-muted: var(--ink);
  --ink-faint: var(--ink);
  --rule: var(--ink);
  --rule-strong: var(--ink);
  --brand: var(--ink);
}

/* Datas especiais. A cor da data informa a data: um fio de 3px no topo da página e um ponto de 8px com o nome da data na barra do topo. Nada mais muda: o fundo continua paper, a interação continua ink, o símbolo e o destaque não mudam. A data some sozinha quando o período acaba. No alto contraste, a data não aparece: --season não é definida. */
@media not (prefers-contrast: more) {
  :root:not([data-contrast="more"])[data-season="ano-novo"] { --season: #8a6700; }
  :root:not([data-contrast="more"])[data-season="carnaval"] { --season: #b0127a; }
  :root:not([data-contrast="more"])[data-season="pascoa"] { --season: #6a3fb5; }
  :root:not([data-contrast="more"])[data-season="festa-junina"] { --season: #c0470c; }
  :root:not([data-contrast="more"])[data-season="dia-da-advocacia"] { --season: #8c1d40; }
  :root:not([data-contrast="more"])[data-season="independencia"] { --season: #00843d; }
  :root:not([data-contrast="more"])[data-season="dia-das-criancas"] { --season: #00838f; }
  :root:not([data-contrast="more"])[data-season="natal"] { --season: #c41e3a; }

  :root:not([data-contrast="more"]).dark[data-season="ano-novo"] { --season: #e8c252; }
  :root:not([data-contrast="more"]).dark[data-season="carnaval"] { --season: #ff6ec7; }
  :root:not([data-contrast="more"]).dark[data-season="pascoa"] { --season: #b79cff; }
  :root:not([data-contrast="more"]).dark[data-season="festa-junina"] { --season: #ff9a5c; }
  :root:not([data-contrast="more"]).dark[data-season="dia-da-advocacia"] { --season: #ff8fb0; }
  :root:not([data-contrast="more"]).dark[data-season="independencia"] { --season: #3ddc84; }
  :root:not([data-contrast="more"]).dark[data-season="dia-das-criancas"] { --season: #4dd0e1; }
  :root:not([data-contrast="more"]).dark[data-season="natal"] { --season: #ff6b7f; }
}


/* Tema da VHA sobre o Gatus (RD-04, PRD-01, PRD-48).
 * O Gatus usa o Tailwind 3 com as variáveis do shadcn em HSL, que não aceitam os tokens do DS (que são hexadecimais).
 * Por isso este arquivo liga as classes que o Gatus usa (a lista sai do css/app.css dele) aos tokens do DS, um a um.
 * Ele entra depois do css/app.css (scripts/vha/brand.py põe o link no index.html), então a mesma classe vence pela ordem;
 * as variantes dark: repetem o seletor do Gatus (.dark .dark\:x) pelo mesmo motivo. Os tokens trocam sozinhos no escuro
 * (tokens.css, com :root.dark), então cada classe aponta para o mesmo token nos dois temas.
 * Só variáveis do DS, nenhuma cor nova (scripts/vha/check-design.sh). */

@font-face {
	font-family: 'Schibsted Grotesk Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 400 900;
	src: url('/vha/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations');
	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: 'Schibsted Grotesk Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 400 900;
	src: url('/vha/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations');
	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;
}

@font-face {
	font-family: 'Bricolage Grotesque Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url('/vha/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2-variations');
	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: 'Bricolage Grotesque Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url('/vha/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
	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;
}

/* Papel, tinta e fonte */
html,
body,
#global {
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
}

/* A cor da marca VHA só no fio de 3px no topo (DS 1.3.0) */
body::before {
	content: '';
	display: block;
	height: var(--data-rule-width);
	background-color: var(--brand);
}

/* Fios: toda borda é rule, menos as que informam (abaixo) */
*,
::before,
::after {
	border-color: var(--rule);
}

/* Destaque na Bricolage Grotesque: o nome, os títulos de tela e de seção */
h1,
h2,
h3 {
	font-family: var(--display);
}

/* Sem fonte monoespaçada: números alinhados com tabular-nums */
.font-mono {
	font-family: var(--sans);
	font-variant-numeric: tabular-nums;
}

/* Escala de texto do DS; acima de text-xl o DS não tem tamanho, então fica em text-xl */
.text-xs {
	font-size: var(--text-xs);
}

.text-sm,
.sm\:text-sm {
	font-size: var(--text-sm);
}

.text-base,
.sm\:text-base {
	font-size: var(--text-base);
}

.text-lg,
.sm\:text-lg {
	font-size: var(--text-lg);
	/* O aperto de -0,02em do DS só no text-lg */
	letter-spacing: -0.02em;
}

.text-xl,
.text-2xl,
.text-3xl,
.text-4xl {
	font-size: var(--text-xl);
}

/* Sem rótulo em caixa alta */
.uppercase {
	text-transform: none;
	letter-spacing: normal;
}

/* Sem sombra nem desfoque: fios, não caixas */
.shadow-sm,
.shadow-md,
.shadow-lg,
.hover\:shadow-sm:hover,
.hover\:shadow-lg:hover {
	box-shadow: none;
}

.backdrop-blur {
	backdrop-filter: none;
}

/* Raio por hierarquia: linhas e cartões com 10px, controles em pílula */
.rounded-lg,
.rounded-t-lg,
.rounded-b-lg {
	border-radius: var(--radius-row);
}

button.rounded-md,
input.rounded-md,
select.rounded-md,
#global button[role='combobox'] {
	border-radius: var(--radius-control);
}

/* Superfícies */
.bg-background,
.bg-background\/50,
.bg-background\/95,
.bg-card,
.bg-card\/50,
.bg-popover,
.bg-white {
	background-color: var(--paper);
}

.bg-secondary,
.bg-accent,
.bg-gray-50,
.bg-gray-200,
.bg-blue-50,
.bg-blue-100,
.hover\:bg-accent:hover,
.hover\:bg-accent\/30:hover,
.hover\:bg-accent\/50:hover,
.hover\:bg-secondary\/80:hover,
.hover\:bg-gray-50:hover,
.dark .dark\:bg-gray-700,
.dark .dark\:bg-gray-800,
.dark .dark\:bg-gray-800\/20,
.dark .dark\:bg-gray-800\/50,
.dark .dark\:bg-blue-900,
.dark .dark\:bg-blue-900\/20,
.dark .dark\:bg-blue-900\/30,
.dark .dark\:bg-blue-900\/50,
.dark .dark\:hover\:bg-gray-700:hover {
	background-color: var(--sunken);
}

.bg-border,
.bg-border\/50,
.bg-gray-300,
.bg-gray-400,
.dark .dark\:bg-gray-600 {
	background-color: var(--rule-strong);
}

/* Toda interação é tinta */
.bg-primary,
.hover\:bg-primary\/80:hover,
.hover\:bg-primary\/90:hover,
.bg-blue-500 {
	background-color: var(--ink);
}

.text-primary-foreground {
	color: var(--paper);
}

/* Texto */
.text-foreground,
.text-card-foreground,
.text-popover-foreground,
.text-secondary-foreground,
.text-accent-foreground,
.text-primary,
.text-gray-900,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900,
.text-emerald-800,
.hover\:text-primary:hover,
.hover\:text-accent-foreground:hover,
.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover,
.hover\:text-emerald-600:hover,
.dark .dark\:text-gray-100,
.dark .dark\:text-blue-200,
.dark .dark\:text-blue-300,
.dark .dark\:text-blue-400,
.dark .dark\:hover\:text-blue-300:hover {
	color: var(--ink);
}

.text-muted-foreground,
.text-muted-foreground\/60,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.placeholder\:text-muted-foreground::placeholder,
.dark .dark\:text-gray-300,
.dark .dark\:text-gray-400 {
	color: var(--ink-muted);
}

/* O texto sobre os pontos e barras de situação */
.text-white {
	color: var(--paper);
}

/* Bordas neutras */
.border-border,
.border-input,
.border-gray-200,
.border-gray-300,
.border-blue-200,
.dark .dark\:border-gray-600,
.dark .dark\:border-blue-700,
.dark .dark\:border-blue-800 {
	border-color: var(--rule);
}

.border-gray-400,
.border-gray-500,
.border-blue-500,
.border-blue-600,
.dark .dark\:border-gray-400,
.dark .dark\:border-blue-400 {
	border-color: var(--rule-strong);
}

/* A cor só quando informa: verde no ar */
.bg-success,
.bg-green-400,
.bg-green-500,
.bg-green-700,
.hover\:bg-green-700:hover,
.dark .dark\:bg-green-600 {
	background-color: var(--ok);
}

.bg-green-50,
.dark .dark\:bg-green-900\/20,
.dark .dark\:bg-green-900\/30,
.dark .dark\:bg-green-900\/50 {
	background-color: var(--ok-wash);
}

.text-green-500,
.text-green-600,
.text-green-700,
.text-green-800,
.dark .dark\:text-green-200,
.dark .dark\:text-green-300,
.dark .dark\:text-green-400 {
	color: var(--ok);
}

.border-green-200,
.border-green-500,
.border-green-600,
.dark .dark\:border-green-400,
.dark .dark\:border-green-700 {
	border-color: var(--ok);
}

/* Âmbar para atenção */
.bg-yellow-400,
.bg-yellow-500 {
	background-color: var(--warn);
}

.bg-yellow-50,
.dark .dark\:bg-yellow-900\/20,
.dark .dark\:bg-yellow-900\/50 {
	background-color: var(--warn-wash);
}

.text-yellow-500,
.text-yellow-600,
.text-yellow-700,
.dark .dark\:text-yellow-300,
.dark .dark\:text-yellow-400 {
	color: var(--warn);
}

.border-yellow-500,
.dark .dark\:border-yellow-400 {
	border-color: var(--warn);
}

/* Vermelho para fora do ar e erro */
.bg-destructive,
.bg-red-400,
.bg-red-500,
.bg-red-600,
.bg-red-700,
.hover\:bg-red-700:hover,
.hover\:bg-destructive\/80:hover,
.hover\:bg-destructive\/90:hover {
	background-color: var(--danger);
}

.bg-red-50,
.bg-red-100,
.bg-destructive\/10,
.dark .dark\:bg-red-900,
.dark .dark\:bg-red-900\/20,
.dark .dark\:bg-red-900\/30,
.dark .dark\:bg-red-900\/50 {
	background-color: var(--danger-wash);
}

.text-destructive,
.text-red-500,
.text-red-600,
.text-red-700,
.text-red-800,
.dark .dark\:text-red-200,
.dark .dark\:text-red-300,
.dark .dark\:text-red-400 {
	color: var(--danger);
}

.text-destructive-foreground {
	color: var(--paper);
}

.border-destructive\/20,
.border-red-200,
.border-red-500,
.border-red-600,
.dark .dark\:border-red-400,
.dark .dark\:border-red-700 {
	border-color: var(--danger);
}

/* Foco do DS: anel de 2px em tinta, afastado 2px, no lugar do anel translúcido do Gatus (WCAG 1.4.11) */
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible,
.focus\:ring-2:focus {
	box-shadow: none;
}

.ring-blue-200,
.dark .dark\:ring-blue-800 {
	--tw-ring-color: var(--rule-strong);
}

/* O símbolo do STATUS no escuro: quadrado de papel, traço de tinta. Vale para o logo do topo e para a tela de
 * carregamento, cujo /img/logo.svg é o símbolo claro (scripts/vha/brand.py) */
.dark img[src='/vha/status-mark.svg'],
.dark img[src$='img/logo.svg'] {
	content: url('/vha/status-mark-dark.svg');
}

/* Estado em texto com um ponto, não em etiqueta cheia: o selo de situação do Gatus (Badge) perde o fundo e fica com o ponto
 * colorido que ele já tem dentro; o texto fica em tinta */
div.rounded-full.border.text-xs.font-semibold {
	background-color: transparent;
	border-color: transparent;
	color: var(--ink);
	padding-left: 0;
	padding-right: 0;
}

/* A contagem de serviços fora do ar no grupo: número com um ponto vermelho, sem bolha cheia */
span.bg-red-600.rounded-full {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	background-color: transparent;
	color: var(--ink);
}

span.bg-red-600.rounded-full::before {
	content: '';
	width: var(--data-dot);
	height: var(--data-dot);
	border-radius: var(--radius-pill);
	background-color: var(--danger);
}

/* Título de grupo um degrau abaixo do título da tela */
h2.text-xl {
	font-size: var(--text-lg);
}