/* Workbook Vivo — Design System "IA com Alma" (Direção A)
   Fonte: Tatá Gonçalves Design System (colors_and_type.css do projeto Claude Design). */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --ink-950:#0A1020; --ink-900:#111A2E; --ink-800:#1A2640; --ink-700:#2A3655;
  --ink-500:#5C6784; --ink-400:#8B93A8; --ink-300:#B4B9C8; --ink-200:#D6D9E0;
  --ink-100:#E8EAEF; --ink-50:#F2F3F6;
  --cream-50:#FAF7F0; --cream-100:#F5EFE0; --cream-200:#EDE4CE; --cream-300:#DCCFB0;

  --accent:#C0432A; --accent-hover:#A5371F; --accent-soft:#F3D9CE; --accent-ink:#6B2313;
  --live:#E14B2E;

  --bg:var(--cream-50); --bg-alt:var(--cream-100); --bg-panel:#FFFFFF; --bg-inverse:var(--ink-950);
  --fg-1:var(--ink-950); --fg-2:var(--ink-700); --fg-3:var(--ink-500);
  --fg-inverse:var(--cream-50); --fg-on-accent:var(--cream-50);
  --border:var(--ink-200); --border-strong:var(--ink-950); --border-soft:var(--cream-200);

  --success:#2F7D4F; --warn:#C77A0E; --danger:#B8321E;

  --shadow-md:0 4px 12px rgba(10,16,32,.10); --shadow-lg:0 12px 32px rgba(10,16,32,.12);
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-pill:999px;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html, body {
  margin:0; background:var(--bg); color:var(--fg-1);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--fg-1); text-decoration:underline; text-underline-offset:3px; }
a:hover { color:var(--accent); }
button { font-family:var(--font-body); }

.eyebrow { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-3); }
.display { font-family:var(--font-display); font-weight:400; line-height:1.05; letter-spacing:-.02em; }

@keyframes livepulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes toastin { from{opacity:0;translate:0 10px} to{opacity:1;translate:0 0} }
@keyframes shimmer { 0%{background-position:-200px 0} 100%{background-position:200px 0} }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--live);
  animation:livepulse 1.4s infinite; flex:none; }
.skeleton { border-radius:var(--r-md); background:linear-gradient(90deg,var(--cream-200) 25%,var(--cream-100) 50%,var(--cream-200) 75%);
  background-size:400px 100%; animation:shimmer 1.2s infinite linear; }

.btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  border:none; border-radius:var(--r-md); padding:15px; font-size:14px; font-weight:700;
  letter-spacing:.02em; cursor:pointer; min-height:50px; transition:background .12s var(--ease-out); }
.btn:active { transform:scale(.98); }
.btn-accent { background:var(--accent); color:var(--fg-on-accent); }
.btn-accent:hover { background:var(--accent-hover); }
.btn-ink { background:var(--ink-950); color:var(--cream-50); }
.btn-ghost { background:none; color:var(--fg-1); border:1px solid var(--border-strong); }
.btn:disabled { background:var(--ink-200); color:var(--fg-3); cursor:not-allowed; transform:none; }

.field label { display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; }
.field input, .field select, .field textarea {
  width:100%; border:1px solid var(--border); border-radius:6px; padding:13px 14px;
  font-family:var(--font-body); font-size:15px; background:var(--bg-panel); color:var(--fg-1);
  min-height:48px; outline:none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--border-strong); }

.card { background:var(--bg-panel); border:1px solid var(--border); border-radius:12px; padding:16px; }
.tag { font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.08em;
  padding:3px 7px; border-radius:4px; text-transform:uppercase; }
.progressbar { height:6px; background:var(--cream-200); border-radius:var(--r-pill); overflow:hidden; }
.progressbar > div { height:100%; background:var(--accent); border-radius:var(--r-pill);
  transition:width .44s var(--ease-out); }

.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:80;
  background:var(--ink-950); color:var(--cream-50); border-radius:var(--r-pill);
  padding:10px 18px; font-size:13px; font-weight:600; white-space:nowrap;
  box-shadow:var(--shadow-lg); animation:toastin .3s var(--ease-out); }

.empty { text-align:center; color:var(--fg-3); padding:40px 20px; font-size:13.5px; }
.empty .display { font-size:22px; color:var(--fg-2); margin-bottom:6px; }

::-webkit-scrollbar { width:0; height:0; }
@media (min-width: 700px) { ::-webkit-scrollbar { width:8px; height:8px; }
  ::-webkit-scrollbar-thumb { background:var(--ink-200); border-radius:4px; } }