/*
 * TITANIUM — fundamentos da direção escolhida pelo Cayo em 28/09/2026 (F1.2, estudo; não aplicado ao app).
 * Contrastes medidos (WCAG 2.2): ver docs/design/2026-09-28-F1.2-titanium.md § Tokens.
 * Regra de uso: texto, números e formulários sempre sobre --surface/--raised opacos; brilho e
 * transparência só em moldura, linha de corte e ilustração.
 */
@font-face {
  font-family: "Archivo";
  src: url("archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("archivo-latin-ext-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* identificação provisória — trocar aqui quando houver nome */
  --brand-name: "Nexus";

  /* estrutura */
  --ground: #071521;
  --ground-deep: #04101A;
  --surface: #102B40;
  --raised: #173B51;
  --sunk: #0B2032;

  /* texto */
  --ink: #F4F8FB;
  --ink-2: #B5C6D3;
  --ink-3: #8FA6B8;      /* rótulos; >= 4.67:1 em --raised */

  /* materiais e assinatura */
  --titanium: #C5D3DF;
  --titanium-edge: rgba(197, 211, 223, .16);
  --titanium-hi: rgba(236, 244, 250, .22);
  --signal: #70DCF1;       /* ação e foco */
  --signal-ink: #04212B;   /* texto sobre --signal: 11.6:1 */
  --signal-tint: rgba(112, 220, 241, .12);
  --select: #2B6F8A;       /* seleção: fundo do item ativo, distinto da ação */

  /* linhas */
  --line: #24475F;          /* só separa; nunca é o contorno de um controle */
  --control-line: #7593AA;  /* contorno de campo: >= 3:1 em --surface e --raised */

  /* estados (sempre com ícone e palavra) */
  --ok: #5DD39E;
  --ok-tint: rgba(93, 211, 158, .12);
  --warn: #F5B85B;
  --warn-tint: rgba(245, 184, 91, .12);
  --bad: #FF8B7E;
  --bad-tint: rgba(255, 139, 126, .12);
  --info: var(--titanium);

  /* tipo */
  --font: "Archivo", Helvetica, Arial, sans-serif;
  --wide: 112%;   /* títulos: largura arquitetônica, sem condensar */

  /* espaço (base 4/8) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* raios por hierarquia */
  --r-frame: 20px;   /* moldura de vidro/titânio */
  --r-panel: 14px;
  --r-control: 10px;
  --r-chip: 8px;

  --touch: 48px;
  --shadow-deep: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 2px 0 0 var(--titanium-hi) inset;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;
}

/* comparação tipográfica: ?font=helvetica troca só a família (mesma tela, conteúdo e largura) */
:root.helv { --font: Helvetica, Arial, sans-serif; --wide: 100%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* moldura de titânio: borda fina + reflexo na aresta superior */
.frame {
  background: linear-gradient(180deg, rgba(23, 59, 81, .55), rgba(16, 43, 64, .35));
  border: 1px solid var(--titanium-edge);
  border-radius: var(--r-frame);
  box-shadow: var(--shadow-deep);
}

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--touch); padding: 0 var(--s5);
  border-radius: var(--r-control); border: 1px solid transparent;
  font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn-primary { background: var(--signal); color: var(--signal-ink); }
.btn-primary:hover { background: #8FE6F6; }
.btn-quiet { background: rgba(197, 211, 223, .06); color: var(--ink); border-color: var(--control-line); }
.btn-quiet:hover { background: rgba(197, 211, 223, .12); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--raised); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }

/* estado: ícone + palavra, cor só reforça */
.state { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.2 var(--font); padding: 4px 10px 4px 8px; border-radius: var(--r-chip); }
.state .i { width: 16px; height: 16px; }
.state-ok { color: var(--ok); background: var(--ok-tint); }
.state-warn { color: var(--warn); background: var(--warn-tint); }
.state-bad { color: var(--bad); background: var(--bad-tint); }
.state-signal { color: var(--signal); background: var(--signal-tint); }
.state-neutral { color: var(--ink-2); background: rgba(197, 211, 223, .08); }

.sample-tag { font: 500 13px/1 var(--font); color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}