/* ==========================================================================
   Tema claro (16/11/2026) — redesign zero
   Sobrescreve os tokens e as superfícies escuras herdadas de app.css.
   ========================================================================== */

:root {
  --ground: #f3f3f2;
  --surface: #ffffff;
  --surface-2: #eeeeec;
  --surface-active: #eaeae8;
  --raised: #eeeeec;
  --field: #ffffff;
  --border: #e4e4e2;
  --rule: #e9e9e7;
  --control: #d8d5cd;

  --text: #17150f;
  --muted: #5f5c55;
  --faint: #75726a;
  --accent: #b26f00;
  --accent-ink: #fff8ec;
  --accent-soft: #fdf1d8;
  --positive: #1f7a4d;
  --positive-bg: #e4f5ea;
  --negative: #b23b2b;
  --negative-bg: #fdeae6;
  --warning: #9a6100;
  --warning-bg: #fdf3de;
}

html { background: var(--ground); color-scheme: light; }
body { background: var(--ground); color: var(--text); }

/* shell */
.sidebar { background: var(--ground); border-right: 1px solid var(--border); }
.brand-mark { color: var(--text); }
.brand-text small { color: var(--faint); }
.nav-group { color: #6f6c64; }
.nav-item { color: #6d6a62; }
.nav-item svg { color: #9a978e; }
.nav-item:hover { background: #ecebe5; color: var(--text); }
.nav-item:hover svg { color: #55524b; }
.nav-item[aria-current="page"] { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.nav-item[aria-current="page"] svg { color: var(--text); }
.nav-count { background: #e7e5de; color: #4a473f; }
.nav-item[aria-current="page"] .nav-count { background: var(--text); color: #fff; }
.sidebar-foot { border-top-color: var(--border); }
.sidebar-foot .nav-item { color: #6d6a62; }
.storage-note { color: var(--faint); }

.topbar { background: var(--ground); border-bottom: 1px solid var(--border); }
.video-chip { background: var(--surface); border: 1px solid var(--border); }
.video-chip:hover { background: #fff; }
.video-chip-sub { color: var(--faint); }
.save-stamp { color: #6f6c64; }

.content, main { background: var(--ground); }

/* type */
.page-head h1, .studio-head h1, .card-title, .section-title, .flow-title,
.variant-title, .rail-title, .dlg-head h2, .empty-title { color: var(--text); }
.page-sub, .studio-lede { color: var(--muted); }
.card-sub, .section-sub, .hint { color: var(--faint); }

/* cards e superfícies */
.card, .rail-card, .variant-card, .drop {
  background: var(--surface);
  border: 1px solid var(--border);
}
.card { border-radius: 16px; }
.drop { background: #fbfaf7; }
.drop:hover, .drop.is-over { background: #fffaf0; box-shadow: inset 0 0 0 1px #e7c88e; }

.kpi-strip { background: var(--surface); border: 1px solid var(--border); }
.kpi-cell { border-left-color: var(--rule); }
.kpi-label, .kpi-note { color: #6f6c64; }
.kpi-value { color: var(--text); }
.kpi-value.is-empty { color: var(--faint); }

/* fluxograma */
.pipe-node { background: var(--surface-2); border-color: transparent; }
.pipe-node:hover { background: #e9e7e0; }
.pipe-node.is-active { background: #fffaf0; border-color: #e8c78a; }
.pipe-icon { color: #8b8880; }
.pipe-node.is-active .pipe-icon { color: var(--accent); }
.pipe-node strong { color: var(--text); }
.pipe-node small { color: var(--faint); }
.pipe-state { color: #6a675f; }
.pipe-state .dot { background: #b9b6ad; }
.pipe-link { background: #d9d6ce; }
.pipe-link::after { border-color: #d9d6ce; }

/* cards de resumo */
.today-list li { border-top-color: var(--rule); }
.today-label { color: #7d7a72; }
.today-value { color: var(--text); }
.today-list small { color: var(--faint); }
.revenue-value { color: var(--text); }
.revenue-goal { color: #7d7a72; }
.revenue-foot .hint { color: var(--faint); }

/* controles */
.btn-primary { background: var(--text); color: #fff; }
.btn-primary:hover { background: #2b2820; }
.btn-primary:disabled { background: #dcd9d1; color: #8b8880; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: #f6f5f0; }
.btn-secondary:disabled { background: #f2f1ec; color: #9a978e; }
.btn-ghost { color: #5f5c55; }
.btn-ghost:hover { background: #eae8e2; color: var(--text); }
.row-action { color: var(--accent); }
.icon-btn:hover { background: #eae8e2; color: var(--text); }

.chip { background: #ecebe5; color: #5f5c55; }
.chip:hover { background: #e3e1da; color: var(--text); }
.chip[aria-pressed="true"] { background: var(--text); color: #fff; }

.field > label { color: #6d6a62; }
.input, .select, .textarea {
  background: var(--surface);
  color: var(--text);
  border-color: #dcd9d1;
}
.input::placeholder, .textarea::placeholder { color: #9a978e; }
.input:hover, .select:hover, .textarea:hover { border-color: #c4c0b7; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--text); }
.input:disabled, .select:disabled, .textarea:disabled { background: #f2f1ec; color: #9a978e; border-color: #e4e2db; }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8880' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

/* pills e estados */
.pill { background: #ecebe5; color: #5f5c55; }
.pill-ok { background: var(--positive-bg); color: var(--positive); }
.pill-accent { background: var(--accent-soft); color: var(--accent); }
.pill-bad { background: var(--negative-bg); color: var(--negative); }
.pill-neutral { background: #ecebe5; color: #6d6a62; }
.pill-warn { background: var(--warning-bg); color: var(--warning); }
.notice { background: #f0efea; color: #55524b; }
.notice strong { color: var(--text); }
.notice.is-stale { background: #fdf3de; color: #7a5300; }

/* tabelas */
.table th { color: #7d7a72; border-bottom-color: #e4e2db; }
.table td { border-bottom-color: var(--rule); }
.table tr.is-clickable:hover td { background: #faf9f5; }
.cell-sub { color: var(--faint); }
.tag { background: #ecebe5; color: #5f5c55; }

/* vazios, diálogos, toasts */
.empty { background: #fbfaf7; border-color: #dcd9d1; }
.empty-text { color: var(--muted); }
.dlg { background: var(--surface); box-shadow: 0 24px 60px rgba(23, 21, 15, .18); }
.dlg-sub { color: var(--faint); }
.dlg::backdrop { background: rgba(23, 21, 15, .35); }
.toast { background: #17150f; color: #fff; }
.toast svg { color: var(--accent); }

/* agenda e produção */
.week-day { background: var(--surface-2); }
.week-day.is-today { border-top-color: var(--accent); }
.week-day-head strong { color: var(--text); }
.week-post { background: #fff; }
.progress-seg { background: #e4e2db; }
.progress-seg.is-done { background: var(--accent); }
.progress-label { color: #7d7a72; }

/* esteira */
.auto-steps { background: #f0efea; }
.auto-steps li { border-left-color: var(--border); color: #55524b; }
.auto-steps li span { color: #8b8880; }
.auto-path { background: var(--surface); border-color: var(--border); }
.auto-path code { color: #55524b; }
.auto-path-label { color: #7d7a72; }
.auto-job { background: #fbfaf7; border-color: var(--border); }
.auto-output { background: var(--surface-2); }
.auto-hook { color: var(--accent); }
.auto-caption { color: var(--muted); }
.auto-tags { color: var(--faint); }
.auto-package { border-top-color: var(--border); }
.auto-package a { color: #5f5c55; border-bottom-color: #d8d5cd; }
.auto-package a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.render-progress { background: #e4e2db; }
.render-progress span { background: var(--accent); }
.check input { accent-color: var(--text); }

/* funil */
.funnel-track { background: #e9e7e0; }
.funnel-track span { background: #c9c6be; }
.funnel-row:first-child .funnel-track span { background: var(--accent); }
.funnel-row strong { color: var(--text); }
.funnel-label { color: var(--muted); }

/* navegação mobile */
.scrim { background: rgba(23, 21, 15, .35); }

@media (max-width: 860px) {
  .sidebar { background: var(--ground); }
}

.pipe-node.is-active .pipe-state { color: #8a5a00; }
.pipe-node.is-active .pipe-state .dot { background: var(--accent); }
.pipe-node.is-done .pipe-icon { color: #6d6a62; }
