/* Tokens da Mesa da TAOS. Os nomes seguem os da casca do os-visual (--bg, --surface, --border, --text,
   --muted, --signal, --font-sans, --raio); os valores são da marca (Context/design-taos.md):
   fundo #050505, verde #30DC68, Inter. O escuro é o padrão; o claro é opção de cada pessoa
   (html[data-tema="claro"], gravado pela casca). As "ilhas" são as superfícies da Ratoeira traduzidas
   para o preto da TAOS: #0c0c0c a #131313, borda de 1 px, raio 14, 8 px de vão. */
:root {
  color-scheme: dark;
  --bg: #050505;
  --surface: rgba(255, 255, 255, .03);
  --surface-2: rgba(255, 255, 255, .06);
  --surface-3: rgba(255, 255, 255, .1);
  --border: rgba(255, 255, 255, .09);
  --border-2: rgba(255, 255, 255, .18);

  /* ilhas: painel, cartão, popover; ilha-2 é o item ativo e o que flutua */
  --ilha: #0c0c0c;
  --ilha-2: #131313;
  --hover: rgba(255, 255, 255, .045);
  --sombra-alta: 0 18px 50px rgba(0, 0, 0, .6);
  --veu: rgba(0, 0, 0, .62);

  --text: #ffffff;
  --text-2: #e8ece9;
  --soft: #c6ccc8;
  --muted: #9aa39d;
  --faint: #7f8a82;

  --signal: #30dc68;
  --signal-light: #85eea7;
  --signal-ink: #062611;
  --signal-dim: rgba(48, 220, 104, .09);
  --signal-border: rgba(48, 220, 104, .3);
  --glow: rgba(48, 220, 104, .15);

  --warn: #e8b04a;
  --warn-dim: rgba(232, 176, 74, .12);
  --danger: #e07a5f;
  --danger-dim: rgba(224, 122, 95, .13);
  --danger-text: #f3b5a5;

  /* avatares de app (t0 a t5 da Ratoeira, em tons escuros): fundo e letra */
  --t0-bg: #2a2310; --t0-tx: #f0c766;
  --t1-bg: #10261a; --t1-tx: #6fe39a;
  --t2-bg: #201b34; --t2-tx: #bcaaf6;
  --t3-bg: #2d1813; --t3-tx: #f2a38b;
  --t4-bg: #121f32; --t4-tx: #92baf2;
  --t5-bg: #231e16; --t5-tx: #d2bd98;

  --font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --raio: 12px;
  --raio-p: 8px;
  --raio-ilha: 14px;
  --dur: 150ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-suave: cubic-bezier(.22, .61, .36, 1);
  --ease-mola: cubic-bezier(.3, 1.6, .5, 1);
}

/* Tema claro: os mesmos papéis, no claro da Ratoeira; o verde escurece para ler sobre o branco. */
:root[data-tema="claro"] {
  color-scheme: light;
  --bg: #ecebe6;
  --surface: rgba(0, 0, 0, .03);
  --surface-2: rgba(0, 0, 0, .055);
  --surface-3: rgba(0, 0, 0, .085);
  --border: rgba(0, 0, 0, .09);
  --border-2: rgba(0, 0, 0, .17);
  --ilha: #ffffff;
  --ilha-2: #ffffff;
  --hover: rgba(0, 0, 0, .04);
  --sombra-alta: 0 0 0 1px rgba(30, 28, 20, .06), 0 10px 30px rgba(30, 28, 20, .14);
  --veu: rgba(30, 28, 20, .32);
  --text: #1f1e1b;
  --text-2: #2b2a26;
  --soft: #3d3c37;
  --muted: #5f5d56;
  --faint: #6b6960;
  --signal: #13803d;
  --signal-light: #17964a;
  --signal-ink: #ffffff;
  --signal-dim: rgba(19, 128, 61, .08);
  --signal-border: rgba(19, 128, 61, .3);
  --glow: transparent;
  --warn: #8a5a00;
  --warn-dim: #fdf0c2;
  --danger: #b2391c;
  --danger-dim: #fde3dc;
  --danger-text: #8a2a16;
  --t0-bg: #fdf0c2; --t0-tx: #7a5d00;
  --t1-bg: #dcf2e2; --t1-tx: #236c3b;
  --t2-bg: #ebe5fb; --t2-tx: #5b3fa8;
  --t3-bg: #fde3dc; --t3-tx: #a23d1d;
  --t4-bg: #dfeafb; --t4-tx: #1f5aa0;
  --t5-bg: #efe8dc; --t5-tx: #6b5a3e;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}