/*
 * Tokens extraidos de design_system/Gestao Odonto - Design System.html
 * Nao editar valores aqui sem atualizar o arquivo de referencia.
 */

:root {
  --bg: oklch(0.982 0.004 200);
  --surface: #fff;
  --surface-2: oklch(0.972 0.005 200);
  --surface-3: oklch(0.955 0.006 200);

  --border: oklch(0.915 0.008 205);
  --border-2: oklch(0.855 0.01 205);

  --text: oklch(0.26 0.02 225);
  --text-2: oklch(0.52 0.016 225);
  --text-3: oklch(0.65 0.012 225);

  --accent: oklch(0.52 0.098 195);
  --accent-2: oklch(0.44 0.09 195);
  --accent-soft: oklch(0.955 0.028 195);
  --accent-line: oklch(0.86 0.05 195);
  --on-accent: #fff;

  --ok: oklch(0.52 0.1 155);
  --ok-soft: oklch(0.955 0.03 155);
  /* Contorno das faixas semanticas, irmao de `--accent-line`. Os valores
     claros sao literais do design system (bloco `:root` de
     `modal/Gestao Odonto - Receituario`); os escuros seguem a regra que
     `--accent-line` ja usa aqui (mesma matiz, luminosidade ~0.42, croma ~0.06).
     `--danger-line` nao existe de proposito: nenhum arquivo do design system o
     define, e onde uma borda vermelha e precisa vale `--danger`, como
     `.consequence--danger` ja faz. */
  --ok-line: oklch(0.86 0.05 155);
  --warn: oklch(0.58 0.11 75);
  --warn-soft: oklch(0.96 0.045 80);
  --warn-line: oklch(0.88 0.06 80);
  --danger: oklch(0.55 0.14 25);
  --danger-soft: oklch(0.955 0.035 25);
  --info: oklch(0.52 0.1 255);
  --info-soft: oklch(0.955 0.03 255);
  --info-line: oklch(0.87 0.05 255);
  --plan: oklch(0.52 0.1 300);
  --plan-soft: oklch(0.955 0.03 300);

  --shadow-sm: 0 1px 2px oklch(0.26 0.02 225 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.26 0.02 225 / 0.07), 0 1px 2px oklch(0.26 0.02 225 / 0.05);
  --shadow-lg: 0 18px 40px oklch(0.26 0.02 225 / 0.12), 0 2px 6px oklch(0.26 0.02 225 / 0.06);

  /* densidade default (sem atributo) */
  --rowh: 40px;
  --pad: 12px;
  --pad-lg: 16px;

  --font: 'Plus Jakarta Sans', -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* O tema escuro so existe em tela. Papel e branco e o navegador nao imprime
   fundo por padrao: sem este `@media screen`, quem esta no escuro imprime
   texto claro sobre branco -- ilegivel. Os valores nao mudam, so quando se
   aplicam. */
@media screen {
[data-theme='dark'] {
  --bg: oklch(0.185 0.012 235);
  --surface: oklch(0.228 0.014 235);
  --surface-2: oklch(0.258 0.014 235);
  --surface-3: oklch(0.29 0.015 235);

  --border: oklch(0.325 0.015 235);
  --border-2: oklch(0.4 0.018 235);

  --text: oklch(0.965 0.005 235);
  --text-2: oklch(0.755 0.012 235);
  --text-3: oklch(0.61 0.014 235);

  --accent: oklch(0.74 0.1 192);
  --accent-2: oklch(0.82 0.09 192);
  --accent-soft: oklch(0.315 0.045 195);
  --accent-line: oklch(0.42 0.06 195);
  --on-accent: oklch(0.19 0.02 225);

  --ok: oklch(0.76 0.11 155);
  --ok-soft: oklch(0.3 0.05 155);
  --ok-line: oklch(0.42 0.06 155);
  --warn: oklch(0.8 0.11 80);
  --warn-soft: oklch(0.32 0.055 75);
  --warn-line: oklch(0.44 0.07 80);
  --danger: oklch(0.72 0.13 25);
  --danger-soft: oklch(0.32 0.06 25);
  --info: oklch(0.75 0.1 255);
  --info-soft: oklch(0.31 0.05 255);
  --info-line: oklch(0.42 0.06 255);
  --plan: oklch(0.76 0.1 300);
  --plan-soft: oklch(0.31 0.05 300);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.45);
  --shadow-lg: 0 18px 40px oklch(0 0 0 / 0.55);
}
}

[data-density='compact'] {
  --rowh: 32px;
  --pad: 8px;
  --pad-lg: 12px;
}

[data-density='confortavel'] {
  --rowh: 48px;
  --pad: 16px;
  --pad-lg: 22px;
}

* {
  box-sizing: border-box;
}

/* Controle nativo nao herda a cor do body: sem isto ele pinta com a cor do
   sistema (`buttontext`, `fieldtext`), que e preta nos dois temas -- e no
   escuro o texto some no fundo (linha de paciente do balcao, `.unit-row`,
   e um <button>). Seletor de elemento perde para qualquer classe, entao so
   alcanca o controle que nao declarou cor propria. */
button, input, select, textarea {
  color: inherit;
}

/* Mesmo defeito no link solto no meio do texto ("crie em Perfis &
   permissoes"): sem cor propria ele sai no azul/roxo do navegador, que no
   escuro some no fundo. A cor e a do link de texto que o projeto ja tem
   (`.sidecard__link`). Quem declara cor na classe continua mandando. */
a { color: var(--accent); }
/* O hover e do link de TEXTO. `a:hover` pesa mais que `.btn--primary`
   (elemento + pseudo-classe contra uma classe so), e o link com cara de botao
   -- "Abrir prontuario" no popup da agenda -- ficava com a letra verde sobre o
   fundo verde. Botao tem o hover dele. */
a:not(.btn):hover { color: var(--accent-2); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
}