/* ============================================================
   Tema do produto — Slate Clean
   Sidebar + editorial · azul frio · hierarquia limpa
   Base de tokens reutilizada pelo preview e pela construção.
   ============================================================ */
:root {
  color-scheme: light;

  /* Tokens BOSIA (fonte de verdade) */
  --bosia-bg: #f3f6fa;
  --bosia-bg-2: #e8eef5;
  --bosia-panel: #ffffff;
  --bosia-border: #d5deea;
  --bosia-border-2: #c0cddd;
  --bosia-text: #17202b;
  --bosia-muted: #5d6b7b;
  --bosia-accent: #2f6feb;
  --bosia-ok: #1a7f4b;
  --bosia-fail: #b42318;
  --bosia-warn: #8a5a00;
  --bosia-radius: 6px;
  --bosia-font: Inter, "Segoe UI", system-ui, sans-serif;

  /* Derivados da paleta — frios, sóbrios e com função */
  --bosia-surface: #ffffff;
  --bosia-surface-2: #f7f9fc;
  --bosia-panel-2: #ffffff;
  --bosia-ink-2: #33404f;
  --bosia-muted-2: #788696;
  --bosia-line-soft: #e5ebf3;
  --bosia-brand-2: #1d5fd0;
  --bosia-brand-3: #4a84f0;
  --bosia-brand-deep: #1b4fb8;
  --bosia-brand-tint: #eaf1fe;
  --bosia-accent-2: #0f7b8a;
  --bosia-brass-tint: #e6f2f4;
  --bosia-info: #2f6feb;
  --bosia-info-tint: #eaf1fe;
  --bosia-ok-tint: #e8f4ee;
  --bosia-warn-tint: #fbf1e0;
  --bosia-danger-tint: #fbeae8;
  --bosia-c1: #2f6feb;
  --bosia-c2: #0f7b8a;
  --bosia-c3: #1a7f4b;
  --bosia-c4: #b07a12;
  --bosia-c5: #5d6b7b;
  --bosia-c6: #c0cddd;
  --bosia-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --bosia-transition: .14s ease;
  --bosia-shadow-1: 0 1px 2px rgba(23, 32, 43, .05);
  --bosia-ring: 0 0 0 3px rgba(47, 111, 235, .18);

  /* Aliases usados pelos componentes */
  --bg: var(--bosia-bg) !important;
  --bg-2: var(--bosia-bg-2) !important;
  --surface: var(--bosia-surface, var(--bosia-panel)) !important;
  --surface-2: var(--bosia-surface-2, var(--bosia-bg-2)) !important;
  --panel: var(--bosia-panel-2, var(--bosia-panel)) !important;
  --ink: var(--bosia-text) !important;
  --ink-2: var(--bosia-ink-2, var(--bosia-text)) !important;
  --muted: var(--bosia-muted) !important;
  --muted-2: var(--bosia-muted-2, var(--bosia-muted)) !important;
  --line: var(--bosia-border) !important;
  --line-soft: var(--bosia-line-soft, var(--bosia-border)) !important;
  --line-strong: var(--bosia-border-2) !important;
  --border-2: var(--bosia-border-2) !important;
  --brand: var(--bosia-accent) !important;
  --brand-2: var(--bosia-brand-2, var(--bosia-accent)) !important;
  --brand-3: var(--bosia-brand-3, var(--bosia-accent)) !important;
  --brand-deep: var(--bosia-brand-deep, color-mix(in srgb, var(--bosia-accent) 82%, #000)) !important;
  --brand-tint: var(--bosia-brand-tint, color-mix(in srgb, var(--bosia-accent) 12%, #fff)) !important;
  --brass: var(--bosia-accent-2, var(--bosia-warn)) !important;
  --brass-tint: var(--bosia-brass-tint, color-mix(in srgb, var(--bosia-accent-2, var(--bosia-warn)) 14%, #fff)) !important;
  --ok: var(--bosia-ok) !important;
  --ok-tint: var(--bosia-ok-tint, color-mix(in srgb, var(--bosia-ok) 12%, #fff)) !important;
  --danger: var(--bosia-fail) !important;
  --danger-tint: var(--bosia-danger-tint, color-mix(in srgb, var(--bosia-fail) 12%, #fff)) !important;
  --fail: var(--bosia-fail) !important;
  --fail-tint: var(--bosia-danger-tint, color-mix(in srgb, var(--bosia-fail) 12%, #fff)) !important;
  --warn: var(--bosia-warn) !important;
  --warn-tint: var(--bosia-warn-tint, color-mix(in srgb, var(--bosia-warn) 14%, #fff)) !important;
  --info: var(--bosia-info, var(--bosia-accent)) !important;
  --info-tint: var(--bosia-info-tint, color-mix(in srgb, var(--bosia-info, var(--bosia-accent)) 12%, #fff)) !important;
  --c1: var(--bosia-c1, var(--bosia-accent)) !important;
  --c2: var(--bosia-c2, var(--bosia-accent-2, var(--bosia-warn))) !important;
  --c3: var(--bosia-c3, var(--bosia-ok)) !important;
  --c4: var(--bosia-c4, var(--bosia-warn)) !important;
  --c5: var(--bosia-c5, var(--bosia-muted)) !important;
  --c6: var(--bosia-c6, var(--bosia-border-2)) !important;
  --radius-sm: calc(var(--bosia-radius) * .6) !important;
  --radius: var(--bosia-radius) !important;
  --radius-lg: calc(var(--bosia-radius) * 1.4) !important;
  --radius-xl: calc(var(--bosia-radius) * 2) !important;
  --sans: var(--bosia-font) !important;
  --serif: var(--bosia-serif, Georgia, serif) !important;
  --bosia-transition: .14s ease;
  --bosia-shadow-1: 0 1px 2px rgba(23, 32, 43, .05);
  --bosia-ring: 0 0 0 3px rgba(47, 111, 235, .18);
}

/* ============================================================
   S30 · Cockpit D1/D2 — barras empilhadas, saúde de fontes e matriz
   ============================================================ */
.stack-track .seg.site{background:var(--bosia-accent)}
.stack-track .seg.doc{background:color-mix(in srgb, var(--bosia-accent) 45%, var(--bosia-border-2))}
.chart-legend .lg-site{background:var(--bosia-accent)}
.chart-legend .lg-doc{background:color-mix(in srgb, var(--bosia-accent) 45%, var(--bosia-border-2))}
.chart-legend .lg-info{background:var(--bosia-accent)}
.chart-legend .lg-warn{background:var(--bosia-warn)}
.chart-legend .lg-neutral{background:var(--bosia-border-2)}
.chart-legend .lg-ok{background:var(--bosia-ok)}
.chart-legend .lg-fail{background:var(--bosia-fail)}
.chart-legend .lg-muted{background:var(--bosia-muted)}
.hbar .name a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--bosia-border-2)}
.hbar .name a:hover{border-bottom-color:var(--bosia-accent);color:var(--bosia-accent)}
.stack-cols{display:flex;align-items:flex-end;gap:14px;height:168px;padding:8px 2px 0;border-bottom:1px solid var(--bosia-border);overflow-x:auto}
.stack-col{flex:1;min-width:56px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;color:inherit;text-decoration:none}
.stack-col:hover .stack-bar{box-shadow:0 0 0 2px var(--bosia-ring)}
.stack-col .stack-bar{width:min(42px,82%);display:flex;flex-direction:column-reverse;border-radius:4px 4px 0 0;overflow:hidden;background:var(--bosia-bg-2);min-height:2px;transition:box-shadow .12s}
.stack-col .stack-bar .seg{display:block;width:100%;min-height:2px}
.stack-col .seg.ok{background:var(--bosia-ok)}
.stack-col .seg.warn{background:var(--bosia-warn)}
.stack-col .seg.info{background:var(--bosia-accent)}
.stack-col .seg.fail{background:var(--bosia-fail)}
.stack-col .seg.muted{background:var(--bosia-border-2)}
.stack-col .val{font-size:12px;font-weight:700;color:var(--bosia-text);font-variant-numeric:tabular-nums}
.stack-col .xlabel{font-size:11px;color:var(--bosia-muted);text-align:center;line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table.matrix td,.table.matrix th{text-align:left}
.table.matrix .matrix-cell{text-align:center;width:96px}
.table.matrix .matrix-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;color:#fff}
.table.matrix .matrix-mark .ic{width:12px;height:12px}
.table.matrix .matrix-mark.contemplado{background:var(--bosia-ok)}
.table.matrix .matrix-mark.justificado{background:var(--bosia-accent)}
.table.matrix .matrix-mark.pendente{background:var(--bosia-warn)}
.table.matrix .matrix-mark.excluido{background:var(--bosia-muted)}
.table.matrix .matrix-dash{color:var(--bosia-border-2)}
@media (max-width:520px){
  .stack-cols{gap:9px;height:150px}
  .stack-col{min-width:46px}
  .table.matrix .matrix-cell{width:56px}
  .table.matrix .matrix-mark{width:18px;height:18px}
}