/* =========================================================
   Iris — tokens, reset e primitivas compartilhadas
   Usado por index.html (app) e loginusr.html (login).

   A ESTRUTURA da paleta (papéis surface / line / ink / accent) vem do
   front-end da Helix: superfícies chapadas, linhas de 1px e tipografia
   editorial, em vez do glassmorphism anterior.
   As CORES continuam as da Iris: verde #1A8B60 (claro) / #2ECC8F (escuro)
   sobre menta #B8D8C8 no tema claro e azul-noite #071321 no escuro.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══ TOKENS ═══════════════════════════════════════════ */
:root, [data-theme="light"] {
  --bg: #B8D8C8;              /* menta da Iris — fundo da área de conversa */
  --surface: #FFFFFF;         /* sidebar, header, composer, cartões */
  --surface-2: #EAF4EE;
  /* --line precisa aparecer nas DUAS superfícies: sobre o branco (3.1:1) e sobre
     a menta do --bg (2.1:1). Um cinza-claro à la Helix desaparecia na menta. */
  --line: #6E9B83;
  --line-soft: #C9E0D3;       /* divisórias internas, só sobre --surface */
  --ink: #0A2418;
  --ink-2: #163527;
  --ink-3: #234737;
  --accent: #1A8B60;          /* verde-escuro da Iris: bordas, ícones, marcas */
  --accent-ink: #0F6342;      /* mesma família, escurecida para texto: 7.2:1 no
                                 branco e 4.7:1 na menta do --bg */
  --accent-tint: rgba(26,139,96,0.08);
  --accent-tint-2: rgba(26,139,96,0.16);
  /* Escala de texto secundário calibrada para ≥4.5:1 sobre --surface e, do
     --muted-2 para cima, também sobre a menta do --bg. */
  --muted: #2E5244;
  --muted-2: #3A6250;
  --faint: #557E6B;
  --faint-2: #8FB4A2;
  --danger: #B23A2F;
  --danger-ink: #96271D;
  --danger-tint: rgba(178,58,47,0.08);
  --on-accent: #FFFFFF;
  --shadow: 0 1px 2px rgba(10,36,24,0.05), 0 12px 32px rgba(10,36,24,0.10);
  --sidebar-w: 276px;
  --header-h: 56px;
}

[data-theme="dark"] {
  --bg: #071321;              /* azul-noite da Iris */
  --surface: #0C1E2F;
  --surface-2: #14293C;
  --line: #1F3A4F;
  --line-soft: #17303F;
  --ink: #EDF2F7;
  --ink-2: #D6E3EA;
  --ink-3: #BBCDD6;
  --accent: #2ECC8F;          /* verde-claro da Iris */
  --accent-ink: #4FD9A2;
  --accent-tint: rgba(46,204,143,0.12);
  --accent-tint-2: rgba(46,204,143,0.22);
  --muted: #9DB2BE;
  --muted-2: #89A0AE;
  --faint: #7C93A3;
  --faint-2: #5C7385;
  --danger: #F87171;
  --danger-ink: #FB8C8C;
  --danger-tint: rgba(248,113,113,0.10);
  --on-accent: #06131F;
  --shadow: 0 1px 2px rgba(0,0,0,0.30), 0 16px 40px rgba(0,0,0,0.45);
}

/* ── Modo dislexia ──
   Arquivos locais primeiro: em rede corporativa que bloqueia o jsdelivr o
   recurso de acessibilidade não pode simplesmente deixar de existir. O CDN fica
   como fallback — são os mesmos bytes (ver static/vendor/OpenDyslexic-LICENSE.txt,
   que precisa acompanhar as fontes por exigência da licença Bitstream Vera). */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/static/vendor/OpenDyslexic-Regular.woff') format('woff'),
       url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Sem este segundo arquivo o navegador engorda o traço do Regular por conta
   própria para desenhar negrito, e o resultado emborrata justamente a fonte
   escolhida por ser mais legível. */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/static/vendor/OpenDyslexic-Bold.woff') format('woff'),
       url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
[data-dyslexia="true"] * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', cursive, sans-serif !important;
  letter-spacing: 0.05em;
  word-spacing: 0.15em;
  line-height: 1.8 !important;
}

/* ── Base ── */
html, body {
  width: 100%;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}
button, textarea, input { font: inherit; color: inherit; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--accent-tint-2); }

/* ── Primitivas tipográficas ── */
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.kicker {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* ── Scroll discreto ── */
.scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* ── Utilitários ── */
.hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Animações compartilhadas ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pulse  { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes sweep  { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

/* =========================================================
   Acessibilidade
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Loops decorativos: desligados de vez, não só acelerados. */
  .spinner, .loading-fill, .status-dot, .history-clock,
  .badge-busy i, .stage.run .stage-mark, .skeleton {
    animation: none !important;
  }
}

@media (prefers-contrast: more) {
  :root, [data-theme="light"] {
    --line: #4B7462;
    --line-soft: #83AC96;
    --muted: #21382D;
    --muted-2: #33594A;
    --faint: #33594A;
  }
  [data-theme="dark"] {
    --line: #4C6070;
    --line-soft: #3A4E5E;
    --muted: #C3D3DC;
    --muted-2: #A9BCC7;
    --faint: #93A8B4;
  }
}