/*
 * Base visual do CMS da Nohora.
 *
 * Mesmos tokens da landing (ink + verde da marca), mas a interface é bem mais
 * leve: sem gradientes, sem animação de entrada, sem grade de fundo. Aqui o
 * protagonista é o texto que está sendo escrito.
 */

:root {
  --ink-950: #05070a;
  --ink-900: #080b0f;
  --ink-850: #0b0f14;
  --ink-800: #10151b;
  --ink-700: #182029;
  --ink-400: #8b99a5;
  --ink-200: #b9c4cc;
  --ink-100: #dde4e9;
  --brand-400: #34dd8c;
  --brand-300: #6feaad;
  --alerta: #f5c451;
  --erro: #ff8b7a;

  /*
   * Superfícies do CMS.
   *
   * A landing usa superfícies quase invisíveis (`white/[0.02]`) porque lá elas
   * são decoração. Aqui são campos e botões: precisam ter borda visível e
   * destacar-se do fundo, senão ninguém enxerga onde clicar. Medido: o fundo
   * dos campos tinha 1,05:1 de contraste com a página — praticamente nada.
   */
  --superficie: #1d252e;
  --superficie-forte: #2b3641;
  --linha: rgba(255, 255, 255, 0.2);
  --linha-forte: rgba(255, 255, 255, 0.38);
  /* Só para texto de apoio bem discreto (placeholder, marcação do Markdown). */
  --ink-fraco: #6b7783;
  --fundo-cms: #0d1218;
  --raio: 10px;
}

* {
  box-sizing: border-box;
}

/* `display` numa classe vence o [hidden] nativo; isto devolve a prioridade. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  /*
   * O CMS usa um fundo um pouco mais claro que o do site.
   * Lá o preto profundo cria a atmosfera da marca; aqui ele só afundava os
   * campos e botões, que precisam ser vistos.
   */
  background: var(--fundo-cms);
  color: var(--ink-100);
  font:
    15px/1.55 ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in oklab, var(--brand-400) 35%, transparent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- marca */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

.marca .simbolo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--brand-400);
  mask: url("/web/logo.png") center / contain no-repeat;
  -webkit-mask: url("/web/logo.png") center / contain no-repeat;
}

.marca .sufixo {
  color: var(--ink-400);
  font-weight: 400;
}

/* -------------------------------------------------------------- controles */

input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

input[type="text"],
input[type="password"],
input[type="date"],
textarea,
select {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
  transition: border-color 0.15s;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--linha-forte);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-fraco);
}

button {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 9px 14px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    opacity 0.15s;
}

button:hover:not(:disabled) {
  background: var(--superficie-forte);
  border-color: var(--linha-forte);
}

button.primario {
  background: var(--brand-400);
  border-color: var(--brand-400);
  color: var(--ink-950);
  font-weight: 600;
}

button.primario:hover:not(:disabled) {
  background: var(--brand-300);
}

button.discreto {
  background: transparent;
  border-color: transparent;
  color: var(--ink-400);
}

button.discreto:hover:not(:disabled) {
  background: var(--superficie);
  color: var(--ink-100);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

label {
  display: block;
  font-size: 13px;
  color: var(--ink-400);
  margin-bottom: 6px;
}

/* ------------------------------------------------------------------- selo */

.selo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  color: var(--ink-200);
  flex-shrink: 0;
  white-space: nowrap;
}

.selo.publicado {
  color: var(--brand-300);
  border-color: color-mix(in oklab, var(--brand-400) 45%, transparent);
}

.selo.rascunho {
  color: var(--alerta);
  border-color: color-mix(in oklab, var(--alerta) 40%, transparent);
}

/* ------------------------------------------------------------------ aviso */

.aviso {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
  font-size: 14px;
  background: var(--superficie);
}

.aviso.erro {
  border-color: color-mix(in oklab, var(--erro) 45%, transparent);
  color: var(--erro);
}

.aviso.ok {
  border-color: color-mix(in oklab, var(--brand-400) 45%, transparent);
  color: var(--brand-300);
}