/* Katakam Honda product theme
 * Shared by Dashboard and Service. Honda red is reserved for brand and
 * critical actions; petrol blue carries routine product interaction.
 */

:root,
[data-theme="light"] {
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --ink: #0F172A;
  --muted: #64748B;
  --accent: #C8102E;
  --accent-strong: #A50D26;
  --accent-solid: #C8102E;
  --brand: #C8102E;
  --interactive: #0F6475;
  --interactive-strong: #0B4F5D;
  --interactive-solid: #0F6475;
  --border: #E2E8F0;
  --up: #10B981;
  --down: #EF4444;
  --nav-bg: #FFFFFF;
  --nav-border: #E2E8F0;
  --subbar-bg: #F1F5F9;
  --chip-bg: #FFFFFF;
  --chip-border: #E2E8F0;
  --chip-ink: #334155;
  --chip-active-bg: #0F6475;
  --chip-active-ink: #FFFFFF;
  --hover-ring: rgba(15, 100, 117, 0.22);
  --shadow-hover: 0 4px 14px rgba(15, 23, 42, 0.08);
  --table-head: #F8FAFC;
  --danger-soft: #FEF2F2;
  --warn-soft: #FFFBEB;
  --ok-soft: #ECFDF5;
  --info-soft: #ECF7F9;
}

[data-theme="dark"] {
  --bg: #0B0F19;
  --card: #161B26;
  --ink: #F3F4F6;
  --muted: #94A3B8;
  --accent: #FF7A86;
  --accent-strong: #B91835;
  --accent-solid: #D51F3A;
  --brand: #FF7A86;
  --interactive: #67C7D7;
  --interactive-strong: #8BD6E2;
  --interactive-solid: #14768A;
  --border: #243044;
  --up: #10B981;
  --down: #EF4444;
  --nav-bg: #161B26;
  --nav-border: #243044;
  --subbar-bg: #0F1420;
  --chip-bg: #161B26;
  --chip-border: #243044;
  --chip-ink: #E2E8F0;
  --chip-active-bg: #14768A;
  --chip-active-ink: #F8FAFC;
  --hover-ring: rgba(103, 199, 215, 0.26);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.35);
  --table-head: #121826;
  --danger-soft: #2A1518;
  --warn-soft: #2A2214;
  --ok-soft: #12241C;
  --info-soft: #10272D;
}

html {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

body.dash-body {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

/* ── Top nav ─────────────────────────────────────────────────────────── */
#top-nav {
  background: var(--nav-bg) !important;
  border-color: var(--nav-border) !important;
  color: var(--ink);
}
#top-nav .dashboard-main-bar {
  background: var(--nav-bg);
}
#top-nav .tab-nav-link {
  color: var(--muted) !important;
}
#top-nav .tab-nav-link:hover {
  color: var(--ink) !important;
  background: var(--subbar-bg) !important;
}
#top-nav .tab-nav-link.bg-slate-100,
#top-nav a.tab-nav-link[class*="bg-slate-100"] {
  background: var(--interactive-solid) !important;
  color: #FFFFFF !important;
}
#top-nav .border-l,
#top-nav .border-slate-200 {
  border-color: var(--nav-border) !important;
}
#top-nav .text-slate-800,
#top-nav .text-slate-900,
#top-nav .font-bold.text-slate-800 {
  color: var(--ink) !important;
}
#top-nav .text-slate-400,
#top-nav .text-slate-500 {
  color: var(--muted) !important;
}

/* Management sub-bar */
#top-nav > .border-t {
  background: var(--subbar-bg) !important;
  border-color: var(--nav-border) !important;
}

/* Branch / date chips — theme-aware defaults (Alpine active classes still win) */
#top-nav button.rounded-lg.border,
#top-nav button.rounded-full.border {
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: var(--chip-ink);
}
#top-nav button.bg-blue-600,
#top-nav button[class*="bg-blue-600"] {
  background: var(--chip-active-bg) !important;
  border-color: var(--chip-active-bg) !important;
  color: var(--chip-active-ink) !important;
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0.375rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.theme-toggle:hover {
  border-color: var(--interactive);
  box-shadow: 0 0 0 3px var(--hover-ring);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 2px;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Shared bento surface ────────────────────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
}
.bento-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  color: var(--ink);
  overflow: hidden;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 160ms ease,
              border-color 160ms ease;
}
.bento-tile:hover {
  transform: translateY(-1px);
  border-color: var(--interactive);
  box-shadow: var(--shadow-hover);
}
.bento-tile:focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 2px;
}
.bento-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.bento-value {
  margin-top: 0.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.bento-muted { color: var(--muted); }
.bento-delta-up { color: var(--up); }
.bento-delta-down { color: var(--down); }
.bento-delta-flat { color: var(--muted); }

.attn-tile,
.comp-tile,
.svc-tile {
  display: block;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  padding: 0.85rem 1rem;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.attn-tile:hover,
.comp-tile:hover,
.svc-tile:hover {
  border-color: var(--interactive);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.attn-tile:focus-visible,
.comp-tile:focus-visible,
.svc-tile:focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 2px;
}

/* Status soft fills — used sparingly for risk */
.is-risk { background: var(--danger-soft) !important; border-color: color-mix(in srgb, var(--down) 35%, var(--border)) !important; }
.is-warn { background: var(--warn-soft) !important; border-color: color-mix(in srgb, #F59E0B 35%, var(--border)) !important; }
.is-ok { background: var(--ok-soft) !important; border-color: color-mix(in srgb, var(--up) 35%, var(--border)) !important; }
.is-info { background: var(--info-soft) !important; border-color: color-mix(in srgb, var(--interactive) 35%, var(--border)) !important; }

.text-up { color: var(--up) !important; }
.text-down { color: var(--down) !important; }
.text-accent { color: var(--interactive) !important; }

.bento-branch {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  overflow: hidden;
}
.bento-branch-head {
  background: var(--table-head);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.bento-branch-head.risk-rose { background: var(--danger-soft); color: var(--down); }
.bento-branch-head.risk-amber { background: var(--warn-soft); color: #D97706; }
.bento-branch-head.risk-clear { background: var(--ok-soft); color: var(--up); }

.th-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  color: var(--ink);
}
.th-table thead {
  background: var(--table-head) !important;
  color: var(--muted) !important;
}
.th-table tbody {
  color: var(--ink);
}
.th-table tbody tr {
  border-color: var(--border) !important;
}
.th-table tbody tr:hover {
  background: var(--subbar-bg) !important;
}

footer {
  color: var(--muted) !important;
}

/* Service shell theming */
.service-sidebar {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--ink);
}
.service-topbar {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
.service-content,
.service-main {
  background: var(--bg);
  color: var(--ink);
}
.service-nav-link { color: var(--muted) !important; }
.service-nav-link:hover,
.service-nav-link.active {
  background: var(--info-soft) !important;
  color: var(--ink) !important;
}
.brief-header,
.analytics-header {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink);
}
.kpi-tile,
.brief-card,
.analytics-card,
.brief-soft {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}
.kpi-tile:hover,
.brief-card:hover,
.analytics-card:hover {
  border-color: var(--interactive) !important;
  box-shadow: var(--shadow-hover);
}
.kpi-label { color: var(--muted) !important; }
.kpi-value { color: var(--ink) !important; }
.delta-up { color: var(--up) !important; }
.delta-down { color: var(--down) !important; }

@media (prefers-reduced-motion: reduce) {
  .bento-tile,
  .attn-tile,
  .comp-tile,
  .svc-tile,
  .theme-toggle {
    transition: none;
  }
  .bento-tile:hover,
  .attn-tile:hover,
  .comp-tile:hover,
  .svc-tile:hover {
    transform: none;
  }
}

/* ── Theme bridge for legacy Tailwind utilities ──
 * Templates predate semantic tokens. Keeping the bridge here lets every
 * dashboard and service screen switch themes without page-level overrides.
 */
body :where(button, a, input, select, textarea, summary) {
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
body :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 2px;
}

[data-theme="dark"] body.dash-body :where(.bg-white, [class*="bg-white/"]),
[data-theme="dark"] .service-frame :where(.bg-white, [class*="bg-white/"]) {
  background-color: var(--card) !important;
}
[data-theme="dark"] body.dash-body :where(.bg-slate-50, [class*="bg-slate-50/"]),
[data-theme="dark"] .service-frame :where(.bg-slate-50, [class*="bg-slate-50/"]) {
  background-color: var(--table-head) !important;
}
[data-theme="dark"] body.dash-body :where(.bg-slate-100, [class*="bg-slate-100/"]),
[data-theme="dark"] .service-frame :where(.bg-slate-100, [class*="bg-slate-100/"]) {
  background-color: var(--subbar-bg) !important;
}
[data-theme="dark"] body.dash-body :where(.text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700),
[data-theme="dark"] .service-frame :where(.text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700) {
  color: var(--ink) !important;
}
[data-theme="dark"] body.dash-body :where(.text-slate-600, .text-slate-500, .text-slate-400),
[data-theme="dark"] .service-frame :where(.text-slate-600, .text-slate-500, .text-slate-400) {
  color: var(--muted) !important;
}
[data-theme="dark"] body.dash-body :where(.border-slate-100, .border-slate-200, .border-slate-300, .divide-slate-100, .divide-slate-200),
[data-theme="dark"] .service-frame :where(.border-slate-100, .border-slate-200, .border-slate-300, .divide-slate-100, .divide-slate-200) {
  border-color: var(--border) !important;
}
[data-theme="dark"] :where(.divide-slate-100, .divide-slate-200) > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border) !important;
}
[data-theme="dark"] body.dash-body :where(.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover),
[data-theme="dark"] .service-frame :where(.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover) {
  background-color: var(--subbar-bg) !important;
}

/* Semantic soft surfaces remain readable without turning the UI into a rainbow. */
[data-theme="dark"] :where(.bg-red-50, .bg-rose-50, [class*="bg-rose-50/"]) { background-color: var(--danger-soft) !important; }
[data-theme="dark"] :where(.bg-amber-50, .bg-yellow-50, [class*="bg-amber-50/"]) { background-color: var(--warn-soft) !important; }
[data-theme="dark"] :where(.bg-emerald-50, .bg-green-50, .bg-teal-50, [class*="bg-teal-50/"]) { background-color: var(--ok-soft) !important; }
[data-theme="dark"] :where(.bg-blue-50, .bg-sky-50, .bg-indigo-50, [class*="bg-indigo-50/"]) { background-color: var(--info-soft) !important; }
[data-theme="dark"] :where(.text-red-700, .text-red-800, .text-rose-600, .text-rose-700, .text-rose-800, .text-rose-900, .text-rose-950) { color: #FDA4AF !important; }
[data-theme="dark"] :where(.text-amber-700, .text-amber-800, .text-amber-900, .text-amber-950, .text-yellow-700, .text-yellow-800) { color: #FCD34D !important; }
[data-theme="dark"] :where(.text-emerald-700, .text-emerald-800, .text-emerald-900, .text-emerald-950, .text-green-700, .text-teal-700, .text-teal-800, .text-teal-900, .text-teal-950) { color: #6EE7B7 !important; }
[data-theme="dark"] :where(.text-blue-700, .text-blue-800, .text-sky-700, .text-sky-800, .text-sky-900, .text-sky-950, .text-indigo-700, .text-indigo-800, .text-indigo-900, .text-indigo-950) { color: #A5B4FC !important; }
[data-theme="dark"] :where(.border-red-200, .border-rose-200, .border-rose-300) { border-color: #7F1D2D !important; }
[data-theme="dark"] :where(.border-amber-200, .border-amber-300, .border-yellow-200) { border-color: #78350F !important; }
[data-theme="dark"] :where(.border-emerald-200, .border-emerald-300, .border-green-200, .border-teal-200, .border-teal-300, .border-teal-400) { border-color: #065F46 !important; }
[data-theme="dark"] :where(.border-blue-200, .border-blue-300, .border-indigo-200, .border-indigo-300) { border-color: #3730A3 !important; }

/* Forms and data tables */
[data-theme="dark"] body.dash-body :where(input, select, textarea),
[data-theme="dark"] .service-frame :where(input, select, textarea) {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] :where(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
[data-theme="dark"] :where(table thead, .tabulator .tabulator-header, .tabulator .tabulator-header .tabulator-col) {
  background: var(--table-head) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
[data-theme="dark"] .tabulator-row,
[data-theme="dark"] .tabulator-row.tabulator-row-even {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .tabulator-row:hover { background: var(--subbar-bg) !important; }
[data-theme="dark"] .tabulator-cell { border-color: var(--border) !important; color: var(--ink) !important; }

/* Service shell details */
.service-sidebar { background: var(--card) !important; }
.service-topbar { background: color-mix(in srgb, var(--card) 94%, transparent) !important; }
.service-brand-mark { background: var(--brand) !important; }
.service-user-copy,
.branch-scope-panel,
.branch-scope > summary,
.mobile-record { background: var(--card) !important; border-color: var(--border) !important; color: var(--ink) !important; }
.service-nav-group + .service-nav-group { border-color: var(--border) !important; }
.service-nav-group-label { color: var(--muted) !important; }
.service-nav-link:hover { background: var(--subbar-bg) !important; color: var(--ink) !important; }
.service-nav-link.active { background: var(--info-soft) !important; color: var(--interactive) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--interactive) 28%, var(--border)) !important; }
.mobile-bottom-link { color: var(--muted) !important; }
.service-nav-link.active svg { color: var(--interactive) !important; }
.mobile-bottom-link.active { background: var(--info-soft) !important; color: var(--interactive) !important; }
[data-theme="dark"] nav[aria-label="Mobile navigation"] { background: color-mix(in srgb, var(--card) 96%, transparent) !important; border-color: var(--border) !important; }

/* Legacy cool utilities resolve to the product interaction color. Honda red
 * remains available through brand/primary tokens and explicit red utilities. */
body :where([class*="text-blue-"], [class*="text-sky-"], [class*="text-indigo-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-teal-"]) {
  color: var(--interactive) !important;
}
body :where([class*="bg-blue-50"], [class*="bg-blue-100"], [class*="bg-sky-50"], [class*="bg-sky-100"], [class*="bg-indigo-50"], [class*="bg-indigo-100"], [class*="bg-violet-50"], [class*="bg-violet-100"], [class*="bg-purple-50"], [class*="bg-purple-100"], [class*="bg-teal-50"], [class*="bg-teal-100"]) {
  background-color: var(--info-soft) !important;
}
body :where([class*="bg-blue-500"], [class*="bg-blue-600"], [class*="bg-blue-700"], [class*="bg-sky-500"], [class*="bg-sky-600"], [class*="bg-sky-700"], [class*="bg-indigo-500"], [class*="bg-indigo-600"], [class*="bg-indigo-700"], [class*="bg-violet-500"], [class*="bg-violet-600"], [class*="bg-violet-700"], [class*="bg-purple-500"], [class*="bg-purple-600"], [class*="bg-purple-700"], [class*="bg-teal-500"], [class*="bg-teal-600"], [class*="bg-teal-700"], [class*="bg-teal-800"]) {
  background-color: var(--interactive-solid) !important;
  color: #fff !important;
}
body :where([class*="border-blue-"], [class*="border-sky-"], [class*="border-indigo-"], [class*="border-violet-"], [class*="border-purple-"], [class*="border-teal-"]) {
  border-color: color-mix(in srgb, var(--interactive) 45%, var(--border)) !important;
}
body :where([class*="ring-blue-"], [class*="ring-sky-"], [class*="ring-indigo-"], [class*="ring-violet-"], [class*="ring-purple-"], [class*="ring-teal-"]) {
  --tw-ring-color: var(--hover-ring) !important;
}

/* Solid, clean elevation and dark-mode legibility for common legacy panels. */
.bento-tile,
.th-panel,
.brief-card,
.analytics-card,
.kpi-tile {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
[data-theme="dark"] :where(.bento-tile, .th-panel, .brief-card, .analytics-card, .kpi-tile) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
[data-theme="dark"] :where(.job-card-verify-hero, .job-card-verify-panel, .close-card, .close-soft, .report-card, .invoice-panel) {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] :where(.bg-slate-900, .bg-gray-900) { background-color: #080B12 !important; }
[data-theme="dark"] :where(.text-white, .text-slate-100, .text-slate-200) { color: #F8FAFC !important; }

/* Dark compatibility for older page-scoped component CSS. */
[data-theme="dark"] :where(
  .sr-summary, .sr-aging-panel, .sr-card, .sr-table-pager, .sr-page-size-select,
  .sr-pager-btn, .sr-drawer, .sr-secondary-action, .form-control, .modal,
  .parts-panel, .parts-document, .parts-document-fact, .spares-panel,
  .invoice-panel, .invoice-context-block, .invoice-metric-card,
  .job-card-hero, .job-card-filter-panel, .job-card-stat, .advisor-mobile-card,
  .advisor-mobile-summary-item, .jc-action, .jc-field, .close-card, .close-soft
) {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] :where(
  .sr-metric-label, .parts-document-label, .parts-table th, .spares-table th,
  .invoice-fact dt, .invoice-meta-label, .mobile-record-label
) { color: var(--muted) !important; }
[data-theme="dark"] :where(
  .parts-document-value, .invoice-panel-title, .invoice-fact dd,
  .invoice-meta-value, .advisor-mobile-card-title
) { color: var(--ink) !important; }
[data-theme="dark"] :where(.sr-table tbody tr, .service-responsive-table tbody tr) {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] :where(.sr-table tbody tr:hover td, .spares-table tbody tr:hover) {
  background: var(--subbar-bg) !important;
}
[data-theme="dark"] :where(.invoice-risk-row, .spares-risk-row, .job-card-stat-amber, .job-card-link-badge-unlinked) {
  background: var(--warn-soft) !important;
  border-color: #78350F !important;
}
[data-theme="dark"] :where(.invoice-risk-badge, .invoice-risk-alert, .spares-risk-badge, .spares-risk-alert) {
  background: var(--danger-soft) !important;
  border-color: #7F1D2D !important;
  color: #FDA4AF !important;
}

/* Character KPI cards: brand, earned value, operations, and attention. */
.kpi-character {
  --kpi-surface: oklch(96.5% 0.012 25);
  --kpi-border: oklch(86% 0.025 25);
  --kpi-ink: oklch(31% 0.04 25);
  --kpi-solid: oklch(52% 0.21 22);
  --kpi-hover: oklch(80% 0.055 25);
  position: relative;
  overflow: hidden;
  background: var(--kpi-surface) !important;
  border-color: var(--kpi-border) !important;
  box-shadow: none !important;
}
.kpi-character::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 1rem;
  width: 2.25rem;
  height: .25rem;
  border-radius: 0 0 999px 999px;
  background: var(--kpi-solid);
}
.kpi-character:hover {
  border-color: var(--kpi-hover) !important;
  box-shadow: 0 4px 8px color-mix(in oklch, var(--kpi-solid) 12%, transparent) !important;
}
.kpi-character .kpi-label,
.kpi-character .kpi-value,
.kpi-character .kpi-value-compact,
.kpi-character .kpi-copy {
  color: var(--kpi-ink) !important;
}
.kpi-tone-green {
  --kpi-surface: oklch(96.8% 0.025 155);
  --kpi-border: oklch(85% 0.07 155);
  --kpi-ink: oklch(33% 0.105 155);
  --kpi-solid: oklch(54% 0.14 155);
  --kpi-hover: oklch(74% 0.11 155);
}
.kpi-tone-petrol {
  --kpi-surface: oklch(96.5% 0.025 220);
  --kpi-border: oklch(84% 0.07 220);
  --kpi-ink: oklch(34% 0.095 220);
  --kpi-solid: oklch(54% 0.12 220);
  --kpi-hover: oklch(72% 0.105 220);
}
.kpi-tone-amber {
  --kpi-surface: oklch(96.8% 0.03 85);
  --kpi-border: oklch(86% 0.09 82);
  --kpi-ink: oklch(36% 0.095 72);
  --kpi-solid: oklch(67% 0.16 70);
  --kpi-hover: oklch(76% 0.13 76);
}
[data-theme="dark"] .kpi-character {
  --kpi-surface: oklch(23% 0.025 22);
  --kpi-border: oklch(42% 0.07 22);
  --kpi-ink: oklch(86% 0.07 20);
  --kpi-solid: oklch(67% 0.19 20);
  --kpi-hover: oklch(55% 0.12 20);
  background: var(--kpi-surface) !important;
  border-color: var(--kpi-border) !important;
}
[data-theme="dark"] .kpi-tone-green {
  --kpi-surface: oklch(23% 0.035 155);
  --kpi-border: oklch(42% 0.075 155);
  --kpi-ink: oklch(86% 0.09 155);
  --kpi-solid: oklch(70% 0.14 155);
  --kpi-hover: oklch(55% 0.1 155);
}
[data-theme="dark"] .kpi-tone-petrol {
  --kpi-surface: oklch(23% 0.035 220);
  --kpi-border: oklch(43% 0.075 220);
  --kpi-ink: oklch(86% 0.085 220);
  --kpi-solid: oklch(72% 0.12 220);
  --kpi-hover: oklch(57% 0.1 220);
}
[data-theme="dark"] .kpi-tone-amber {
  --kpi-surface: oklch(24% 0.035 78);
  --kpi-border: oklch(45% 0.085 76);
  --kpi-ink: oklch(87% 0.1 82);
  --kpi-solid: oklch(76% 0.15 78);
  --kpi-hover: oklch(58% 0.105 76);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  body :where(*, *::before, *::after) {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}