/* app/static/theme.css
   Design tokens portados do mockup Claude Design (docs/design/mockup-claude-design.dc.html).
   Tema CLARO em :root (default) e ESCURO em html[data-theme="dark"].
   Paleta Braveo, tipografia (Figtree / Public Sans / IBM Plex Mono) e animacoes base. */

:root {
  --bg: #F1EFE8; --surface: #FFFFFF; --surface-2: #FBF7F1; --surface-3: #F5F0E8;
  --border: #E7E1D6; --border-strong: #D8D0C2;
  --text: #1F1226; --text-2: #6B5E74; --text-3: #9A8FA3;
  --primary: #2A073B; --primary-hover: #3D1153; --primary-contrast: #FFFFFF;
  --primary-soft: #EFE4F5; --primary-soft-fg: #4A1668; --peach: #FCE5CD;
  --ring: rgba(42,7,59,.18);
  --sidebar-bg: #2A073B; --sidebar-fg: #C4B2D2; --sidebar-fg-strong: #FFFFFF;
  --sidebar-active-bg: rgba(255,255,255,.12); --sidebar-active-fg: #FFFFFF; --sidebar-border: rgba(255,255,255,.08);
  --pos-bg: #D9EAD3; --pos-fg: #2E6B33; --warn-bg: #FFF2CC; --warn-fg: #8A6300;
  --neg-bg: #F6D7D7; --neg-fg: #A83A3A; --info-bg: #E3E8F1; --info-fg: #3C4A63;
  --ps-bg: #EEE3F6; --ps-fg: #5A2A88; --peach-bg: #FBE6CF; --peach-fg: #8A5320;
  --track: #EAE3D8; --pos-strong: #3E8E4A;
  --shadow: 0 1px 2px rgba(31,18,38,.06), 0 10px 26px rgba(31,18,38,.05);
}

html[data-theme="dark"] {
  --bg: #150A1E; --surface: #241033; --surface-2: #2E1440; --surface-3: #20112E;
  --border: #3C2450; --border-strong: #4A2E63;
  --text: #F3EAF7; --text-2: #B9A9C6; --text-3: #8A7A99;
  --primary: #C9A9E9; --primary-hover: #D8BFF2; --primary-contrast: #1A0B26;
  --primary-soft: #2E1440; --primary-soft-fg: #D6BCF0; --peach: #FCE5CD;
  --ring: rgba(201,169,233,.28);
  --sidebar-bg: #1B0B27; --sidebar-fg: #B9A9C6; --sidebar-fg-strong: #F3EAF7;
  --sidebar-active-bg: rgba(201,169,233,.16); --sidebar-active-fg: #E9D8FA; --sidebar-border: rgba(255,255,255,.06);
  --pos-bg: #1E3A2A; --pos-fg: #7FCB9B; --warn-bg: #3A2E12; --warn-fg: #E0B44D;
  --neg-bg: #3A1E1E; --neg-fg: #E58C8C; --info-bg: #1E2740; --info-fg: #A9C0E8;
  --ps-bg: #2E1440; --ps-fg: #C9A9E9; --peach-bg: #3A2A1A; --peach-fg: #F0C89A;
  --track: #301A42; --pos-strong: #4FA96B;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Public Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body, body * {
  transition: background-color .25s ease, border-color .25s ease, color .18s ease, box-shadow .25s ease;
}
input, button, select { font-family: inherit; }
::placeholder { color: var(--text-3); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* Foco de teclado visivel (acessibilidade) usando o token --ring. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes riseIn { from { transform: translateY(6px); } to { transform: none; } }

/* Helpers reutilizados pelos templates portados. */
.dc-font-title { font-family: 'Figtree', system-ui, sans-serif; }
.dc-font-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.dc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.dc-nav-link:hover { background: var(--sidebar-active-bg); color: var(--sidebar-fg-strong); }
.dc-nav-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); }