/*
 * Koder Design — UI style preset rules
 *
 * Source: ~/temp/koder-ui-style-previews.html (2026-05-09 prototype, ratified
 * as the visual reference of design-RFC-001). Only `.preset.*` selectors
 * are kept here; page chrome lives in base.css. Each preset declares its
 * own CSS custom properties on `.preset.<slug>` and the inner cards read
 * them via `var(--…)` with light-theme defaults.
 *
 * Stage container forces a light backdrop so previews render the same
 * regardless of the surrounding page theme.
 */
.stage, .stage-large {
  background: linear-gradient(180deg, #f5f5f5, #ececec);
  padding: 20px;
  border-radius: 8px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-large { padding: 40px; min-height: 360px; }
/* KDS-022 (2026-05-13) — side-by-side compare mode for preset detail
   pages. In default mode (.compare-active absent), only the
   [data-stage-mode] matching the global theme is shown. When the user
   activates compare mode, both light and dark instances render
   side-by-side at ≥ 768px (stack vertically below per
   specs/web-apps/responsiveness.kmd). */
.stage [data-stage-mode] { display: none; }
:root:not([data-theme="dark"]) .stage [data-stage-mode="light"], :root[data-theme="dark"] .stage [data-stage-mode="dark"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.uistyle-detail-page.compare-active .stage, .uistyle-detail-page.compare-active .stage-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--kdr-surface, #f5f5f5);
}
.uistyle-detail-page.compare-active .stage [data-stage-mode], .uistyle-detail-page.compare-active .stage-large [data-stage-mode] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(180deg, #f5f5f5, #ececec);
  border-radius: 6px;
  position: relative;
}
.uistyle-detail-page.compare-active .stage [data-stage-mode="dark"], .uistyle-detail-page.compare-active .stage-large [data-stage-mode="dark"] {
  background: linear-gradient(180deg, #1a1c20, #0d0f12);
}
.uistyle-detail-page.compare-active .stage [data-stage-mode]::before, .uistyle-detail-page.compare-active .stage-large [data-stage-mode]::before {
  content: attr(data-stage-label);
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-family: var(--kds-font-mono, monospace);
}
.uistyle-detail-page.compare-active .stage [data-stage-mode="dark"]::before, .uistyle-detail-page.compare-active .stage-large [data-stage-mode="dark"]::before {
  color: #f1f5f9;
}
.uistyle-detail-page.compare-active .stage [data-stage-mode="light"]::before, .uistyle-detail-page.compare-active .stage-large [data-stage-mode="light"]::before {
  color: #0f172a;
}
/* Mobile stack — per responsiveness.kmd, side-by-side is desktop-only. */
@media (max-width: 768px) {
  .uistyle-detail-page.compare-active .stage,
  .uistyle-detail-page.compare-active .stage-large {
    grid-template-columns: 1fr;
  }
}
.compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--kdr-surface);
  color: var(--kdr-text);
  border: 1px solid var(--kdr-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.compare-toggle:hover, .compare-toggle:focus-visible {
  background: var(--kdr-surface-2);
  border-color: var(--kdr-accent);
}
.compare-toggle[aria-pressed="true"] {
  background: var(--kdr-accent, #6366f1);
  color: #fff;
  border-color: var(--kdr-accent, #6366f1);
}
/* KDS-022 follow-up (2026-05-13) — fallback dark variant pra side-by-side
   compare mode. Cada `.preset.<slug>` define apenas tokens light hoje
   (`--bg`, `--surface`, `--on-surface`, `--label-color`). Sem essa
   regra, o painel ESCURO renderiza idêntico ao CLARO pra qualquer
   preset que ainda não tem dark artesanal — quebrando o propósito
   visual do side-by-side.
   Esse fallback aplica defaults dark sensatos a `.preset.themed-dark`
   sem slug, e fica abaixo na cascata pra que presets que definirem
   `.preset.themed-dark.<slug>` artesanal sobrescrevam. Ticket de
   acompanhamento: tools/design-gen/backlog/pending/NNN-preset-dark-variants. */
/* Default light color-scheme for every preset preview, so native form
   controls (input/textarea/select/scrollbar) follow the preset's mode
   instead of bleeding the OS theme through Chrome's UA stylesheet —
   same fix base.css uses on the settings rail (see ~line 4424). The
   .themed-dark override below switches it to dark when Mode is dark. */
.preset { color-scheme: light; }
/* Nota: o seletor `.themed-dark.preset` (em vez de `.preset.themed-dark`)
   é proposital. O `css_split.go::SplitPresetsCSS` faz match em
   `\.preset\.([a-z0-9_]+)` pra atribuir cada regra a um chunk per-slug.
   O regex pega `themed` (parando no hyphen) e cria phantom chunk
   `themed.css`. Como esta regra é fallback genérico (sem slug), o
   correto é mantê-la no `presets-core.css`. Reordenar o seletor escapa
   o regex sem mudar a semântica CSS (especificidade idêntica). Bug do
   splitter tratado separadamente em ticket dedicado. */
.themed-dark.preset {
  /* color-scheme tells the browser's UA stylesheet what theme native
     form controls (<input>, <textarea>, <select>, scrollbars) should
     render in. Without this, OS dark mode leaks dark UA defaults into
     light-preset previews regardless of our explicit `background` rules
     — see base.css line ~4424 for the same fix on the settings rail. */
  color-scheme: dark;
  /* 2026-05-13 (segunda iteração): owner reportou que o form-card
     "se misturava" com o stage outer. Stage dark gradient #1a1c20→
     #0d0f12 (média ~#141618) era quase idêntico ao card bg #14171c.
     Bumped --bg pra #22272e (card pops ~8% mais claro que stage),
     adicionado border + shadow mais fortes pra contorno visível. */
  --bg: #1a1f26;
  --surface: #22272e;
  --surface-2: #131619;
  --on-surface: #f1f1f4;
  --label-color: #b9bcc4;
  --input-border: 1px solid #3a4048;
  --btn-secondary-bg: #2a2f37;
  --btn-secondary-fg: #f1f1f4;
  --btn-secondary-border: 1px solid #3a4048;
  --btn-secondary-hover: #353b44;
  --shadow-form: 0 2px 8px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
}
/* Fallback genérico precisa sobrescrever regras per-preset que usam
   cores hardcoded (e.g., `.preset.notion input:focus { background:
   #F7F6F3 }` — light value que vence sobre as CSS vars do fallback).
   Por isso `!important` aqui é necessário até cada preset ter artesanal
   dark via ticket #007. Sem isso, inputs renderizam dark bg + dark text
   (texto invisível) em presets de cores fortes. */
.themed-dark.preset input, .themed-dark.preset textarea, .themed-dark.preset select {
  background: #131619 !important;
  color: #f1f1f4 !important;
  border-color: #2a2f37 !important;
}
.themed-dark.preset input:focus, .themed-dark.preset textarea:focus, .themed-dark.preset select:focus {
  background: #131619 !important;
  color: #f1f1f4 !important;
}
.themed-dark.preset .form-card {
  background: #1a1f26 !important;
  color: #f1f1f4 !important;
  border: 1px solid #2a2f37 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
.themed-dark.preset .form-title, .themed-dark.preset label, .themed-dark.preset label > span {
  color: #f1f1f4 !important;
}
.themed-dark.preset .btn-secondary {
  background: #2a2f37 !important;
  color: #f1f1f4 !important;
  border-color: #3a4048 !important;
}
.themed-dark.preset .btn-secondary:hover {
  background: #353b44 !important;
}
/* ─── Style builder (#008.10-11) ─── */
/* Page chrome */
.sb-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.sb-header-left h1 { margin: 0 0 4px; font-size: 1.5rem; }
.sb-lede { margin: 0; color: var(--text-muted, #666); font-size: 0.95rem; }
.sb-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-mode-label { font-size: 0.85rem; color: var(--text-muted, #666); }
/* Buttons */
.sb-mode-btn, .sb-action-btn {
  padding: 5px 12px; border-radius: 6px;
  /* surface-2 gives ~3 steps of contrast against --kdr-bg in dark mode
     where --kdr-surface is too close to bg (#14171c vs #0d0f12). */
  border: 1px solid color-mix(in srgb, var(--kdr-text) 25%, transparent);
  background: var(--kdr-surface-2); color: var(--kdr-text);
  cursor: pointer; font-size: 0.82rem; transition: background 0.15s;
}
.sb-mode-btn:hover, .sb-action-btn:hover { background: color-mix(in srgb, var(--kdr-text) 10%, transparent); }
.sb-mode-btn[aria-pressed="true"] { background: var(--kdr-accent, #3584E4); color: #fff; border-color: transparent; }
.sb-action-btn--danger { border-color: color-mix(in srgb, #e01b24 35%, transparent); color: #e01b24; }
.sb-action-btn--danger:hover { background: color-mix(in srgb, #e01b24 12%, transparent); }
/* Disabled glyphs (undo/redo) need enough alpha to stay readable in
   dark mode against --kdr-surface-2 — 0.4 was too faint. */
.sb-action-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Flash message */
.sb-flash { position: fixed; bottom: 24px; right: 24px; background: #2e3436; color: #fff;
  padding: 8px 16px; border-radius: 8px; font-size: 0.88rem; z-index: 9999;
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.sb-flash--visible { opacity: 1; transform: none; }
/* 2-col layout */
.sb-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; margin-bottom: 24px; }
@media (max-width: 860px) { .sb-layout { grid-template-columns: 1fr; } }
/* Editor panel (left) — uses page chrome vars so dark mode works
   even outside a .preset.<name> scope where --surface is defined. */
.sb-editor { background: var(--kdr-surface); color: var(--kdr-text);
  border: 1px solid color-mix(in srgb, var(--kdr-text) 12%, transparent);
  border-radius: 10px; overflow: hidden; }
.sb-editor-header { padding: 0; border-bottom: 1px solid color-mix(in srgb, var(--kdr-text) 12%, transparent); }
.sb-tab-bar { display: flex; }
.sb-tab { flex: 1; padding: 10px 4px; border: none; background: none; cursor: pointer;
  font-size: 0.8rem; font-weight: 500; color: var(--kdr-text-muted); transition: color 0.15s;
  border-bottom: 2px solid transparent; }
.sb-tab[aria-selected="true"] { color: var(--kdr-accent, #3584E4); border-bottom-color: var(--kdr-accent, #3584E4); background: color-mix(in srgb, var(--kdr-accent, #3584E4) 8%, transparent); }
.sb-editor-panel { padding: 12px; display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; }
/* Token rows */
.sb-token-row { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.sb-row-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--kdr-text) 18%, transparent); flex-shrink: 0; }
.sb-row-dot--changed { background: var(--kdr-accent, #3584E4); }
.sb-token-label { font-size: 0.78rem; color: var(--kdr-text-muted); min-width: 110px; flex-shrink: 0; }
.sb-color-inputs { display: flex; align-items: center; gap: 6px; flex: 1; }
.sb-color-swatch { width: 30px; height: 30px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--kdr-text) 20%, transparent); cursor: pointer; padding: 2px; flex-shrink: 0; }
.sb-hex-input { width: 76px; font-size: 0.78rem; font-family: monospace; padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--kdr-text) 20%, transparent); border-radius: 4px;
  background: var(--kdr-bg); color: var(--kdr-text); }
.sb-range-inputs { display: flex; align-items: center; gap: 6px; flex: 1; }
.sb-range { flex: 1; accent-color: var(--kdr-accent, #3584E4); }
.sb-range-val { font-size: 0.78rem; font-family: monospace; min-width: 36px; color: var(--kdr-text-muted); }
.sb-font-inputs { display: flex; align-items: center; gap: 6px; flex: 1; }
.sb-font-select { flex: 1; font-size: 0.8rem; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--kdr-text) 20%, transparent); border-radius: 4px; background: var(--kdr-bg); color: var(--kdr-text); }
.sb-reset-token { padding: 2px 6px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--kdr-text) 15%, transparent);
  background: none; cursor: pointer; font-size: 0.75rem; color: var(--kdr-text-muted); }
.sb-reset-token:hover:not(:disabled) { background: color-mix(in srgb, var(--kdr-text) 6%, transparent); }
.sb-reset-token:disabled { opacity: 0.3; cursor: default; }
/* Diff panel */
.sb-diff-section { border-top: 1px solid color-mix(in srgb, var(--kdr-text) 12%, transparent); padding: 10px 12px; }
.sb-diff-section summary { font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--kdr-text); }
.sb-diff { margin: 8px 0 0; font-size: 0.75rem; font-family: monospace; white-space: pre-wrap;
  color: var(--kdr-text-muted); line-height: 1.5; max-height: 160px; overflow-y: auto; }
/* Preview area (right) */
.sb-preview-area { background: #eee; border-radius: 10px; overflow: hidden; }
[data-theme="dark"] .sb-preview-area, .themed-dark .sb-preview-area { background: #1a1a1a; }
.sb-preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: color-mix(in srgb, var(--kdr-text) 5%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--kdr-text) 10%, transparent); color: var(--kdr-text); flex-wrap: wrap; gap: 8px; }
.sb-preview-label { font-size: 0.8rem; font-weight: 600; color: var(--kdr-text-muted); }
.sb-preset-name-group { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.sb-preset-name-input { padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--kdr-text) 20%, transparent); border-radius: 4px; font-size: 0.8rem; font-family: monospace; width: 140px; background: var(--kdr-bg); color: var(--kdr-text); }
/* Preview card itself — picks up the active preset's --bg so the form
   content sits on the preset surface, not the page chrome stage. */
.sb-preview { padding: 20px; min-height: 360px;
  background: var(--bg); color: var(--on-surface);
  transition: background 0.2s, color 0.2s; }
.sb-preview-inner { display: flex; flex-direction: column; gap: 20px; }
.sb-components { display: flex; flex-direction: column; gap: 10px; }
.sb-component-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* ─── Preview form classes (.form-wrap / .field / .field-label / etc.) ───
   The interactive form preview emits markup with these classes; without
   their own rules, labels and the wrapper rendered against whatever bg
   bled through from .sb-preview-area, which in App-Light + Mode-Dark
   left the dark preset's --label-color (#cccccc) painting onto the
   light page-chrome stage — invisible. Bind each piece to the
   preset's tokens. */
.sb-preview .form-wrap {
  display: flex; flex-direction: column; gap: var(--gap-field, 10px);
  background: var(--surface, #fff); color: var(--on-surface, #111);
  border: 1px solid color-mix(in srgb, var(--on-surface, #000) 12%, transparent);
  border-radius: var(--radius-lg, 12px);
  padding: var(--pad-form, 24px);
  box-shadow: var(--shadow-form, 0 1px 3px rgba(0,0,0,0.08));
  max-width: 480px;
}
.sb-preview .form-wrap h2 {
  margin: 0 0 calc(var(--gap-title, 14px) - 4px);
  font-size: 1.25rem; font-weight: 600;
  color: var(--on-surface, #111);
}
.sb-preview .fieldset-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-field, 10px); }
@media (max-width: 600px) { .sb-preview .fieldset-group { grid-template-columns: 1fr; } }
.sb-preview .field { display: flex; flex-direction: column; gap: 4px; }
.sb-preview .field-label {
  font-size: var(--font-size-label, 12px);
  font-weight: var(--font-weight-label, 500);
  color: var(--label-color, #5e6772);
  letter-spacing: var(--letter-label, normal);
}
.sb-preview .field-label.checkbox-label {
  flex-direction: row; align-items: center; gap: 8px;
  display: inline-flex; cursor: pointer;
}
.sb-preview .field-error {
  font-size: 0.78rem; color: var(--error, #e01b24); margin-top: 2px;
}
.sb-preview .field .input.input--error { border-color: var(--error, #e01b24); }
.sb-preview .form-actions { display: flex; gap: 10px; margin-top: 4px; }
/* Export section */
.sb-export { margin-bottom: 24px; }
.sb-export h2 { font-size: 1.1rem; margin-bottom: 12px; }
.sb-export-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
@media (max-width: 720px) { .sb-export-tabs { grid-template-columns: 1fr; } }
.sb-export-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sb-export-col-label { font-weight: 600; font-size: 0.88rem; font-family: monospace; }
.sb-export-textarea { width: 100%; font-family: monospace; font-size: 0.78rem; padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kdr-text) 20%, transparent); border-radius: 8px;
  background: var(--kdr-surface); color: var(--kdr-text);
  resize: vertical; line-height: 1.5; }
.sb-export-actions { display: flex; gap: 8px; }
/* Import section */
.sb-import { margin-bottom: 32px; }
.sb-import h2 { font-size: 1.1rem; margin-bottom: 6px; }
.sb-import-lede { font-size: 0.88rem; color: var(--kdr-text-muted); margin-bottom: 8px; }
.sb-import-submit { margin-top: 8px; }
/* ─── Surface showcase (#008.9) ─── */
/* Tab bar */
.surface-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--kdr-border, rgba(0,0,0,0.10));
  margin-bottom: 20px;
}
.surface-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kdr-text-secondary, #666);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s;
}
.surface-tab:hover { color: var(--kdr-accent, #6750A4); }
.surface-tab.active {
  color: var(--kdr-accent, #6750A4);
  border-bottom-color: var(--kdr-accent, #6750A4);
  font-weight: 600;
}
/* Panels */
.surface-panel { display: none; }
.surface-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .surface-panel.active { grid-template-columns: 1fr; } }
/* Device frame inside each panel */
.surface-frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--kdr-border, rgba(0,0,0,0.12));
  background: var(--kdr-surface, #fff);
}
.surface-frame-bar {
  background: var(--kdr-surface-2, #f5f5f5);
  border-bottom: 1px solid var(--kdr-border, rgba(0,0,0,0.08));
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kdr-text-secondary, #888);
  display: flex;
  align-items: center;
  gap: 6px;
}
.surface-frame-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kdr-accent, #6750A4); opacity: 0.5;
}
.surface-frame-body { padding: 16px; }
/* Rules aside */
.surface-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.surface-rules h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kdr-text-secondary, #888);
  margin: 0 0 4px;
}
.surface-rule {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--kdr-text, #333);
}
.surface-rule-icon {
  font-size: 15px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
/* ── Mobile surface density ── */
/* ── Desktop surface density ── */
/* ── Web surface density ── */
@media (max-width: 480px) { .preset.surface-web .fieldset-group { grid-template-columns: 1fr; } }
/* ── TV surface density ── */
/* Fix label overlap (2026-05-13): em listing page o form-card é menor
   e fica próximo do topo do panel, sobrepondo o label absoluto
   (CLARO/ESCURO). Aumentar padding-top do panel pra que o form fique
   abaixo da zona reservada pro label. Padding-bottom igual ao top
   pra simetria visual (owner reportou 2026-05-13 19:30). */
.uistyle-detail-page.compare-active .stage [data-stage-mode], .uistyle-detail-page.compare-active .stage-large [data-stage-mode] {
  padding-top: 32px;
  padding-bottom: 32px;
}
.preset .form-card {
  font-family: var(--font, 'Inter', sans-serif);
  background: var(--bg, #fff);
  color: var(--on-surface, #111);
  border-radius: var(--radius-lg, 12px);
  padding: var(--pad-form, 24px);
  box-shadow: var(--shadow-form, 0 4px 16px rgba(0,0,0,0.1));
  border: var(--border-form, none);
  width: 100%;
  max-width: 440px;
}
.preset .form-title {
  margin: 0 0 var(--gap-title, 20px);
  font-size: var(--font-size-title, 18px);
  font-weight: var(--font-weight-title, 600);
  letter-spacing: var(--letter-title, normal);
  color: var(--on-surface, #111);
}
.preset label {
  display: block;
  font-size: var(--font-size-label, 12px);
  font-weight: var(--font-weight-label, 500);
  color: var(--label-color, #555);
  margin-bottom: var(--gap-label, 6px);
  letter-spacing: var(--letter-label, normal);
  text-transform: var(--label-case, none);
}
.preset input {
  width: 100%;
  padding: var(--pad-y, 10px) var(--pad-x, 12px);
  font-family: inherit;
  font-size: var(--font-size-input, 14px);
  background: var(--surface, #fff);
  color: var(--on-surface, #111);
  border: var(--input-border, 1px solid #ccc);
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--gap-field, 14px);
  outline: none;
  transition: var(--motion, 150ms ease);
  box-shadow: var(--input-shadow, none);
}
.preset input:focus {
  border-color: var(--accent, #6750A4);
  box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent));
}
.preset .row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--row-gap, 12px);
}
.preset .actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: var(--gap-actions, 16px);
}
.preset button {
  padding: var(--pad-btn-y, 8px) var(--pad-btn-x, 20px);
  font-family: inherit;
  font-size: var(--font-size-btn, 14px);
  font-weight: var(--font-weight-btn, 500);
  border-radius: var(--radius-btn, var(--radius-md, 6px));
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--motion, 150ms ease);
  letter-spacing: var(--letter-btn, normal);
  text-transform: var(--btn-case, none);
}
.preset .btn-secondary {
  background: var(--btn-secondary-bg, transparent);
  color: var(--btn-secondary-fg, var(--on-surface, #111));
  border-color: var(--btn-secondary-border, transparent);
}
.preset .btn-primary {
  background: var(--accent, #6750A4);
  color: var(--accent-on, #fff);
  border-color: var(--btn-primary-border, var(--accent, #6750A4));
  box-shadow: var(--btn-shadow, none);
}
.preset .btn-secondary:hover { background: var(--btn-secondary-hover, rgba(0,0,0,0.05)); }
.preset .btn-primary:hover { background: var(--accent-strong, var(--accent, #6750A4)); }
/* ── Button variants (tertiary / ghost / destructive) ── */
.preset .btn-tertiary {
  background: transparent;
  color: var(--btn-tertiary-color, var(--accent, #6750A4));
  border-color: transparent;
  padding-left: var(--pad-btn-x-tertiary, 8px);
  padding-right: var(--pad-btn-x-tertiary, 8px);
}
.preset .btn-tertiary:hover {
  background: var(--btn-tertiary-hover, rgba(0,0,0,0.06));
}
.preset .btn-ghost {
  background: transparent;
  color: var(--btn-ghost-color, var(--on-surface, #111));
  border-color: var(--btn-ghost-border, var(--input-border-color, #ccc));
}
.preset .btn-ghost:hover {
  background: var(--btn-ghost-hover, rgba(0,0,0,0.04));
}
.preset .btn-destructive {
  background: var(--error, #B3261E);
  color: var(--error-on, #fff);
  border-color: var(--error, #B3261E);
}
.preset .btn-destructive:hover {
  background: var(--error-strong, #8C1D18);
}
/* ── Button states ── */
.preset button:disabled, .preset button[disabled] {
  opacity: var(--disabled-opacity, 0.4);
  cursor: not-allowed;
  pointer-events: none;
}
/* ── Button size variants ── */
.preset button.btn-sm {
  padding: var(--pad-btn-y-sm, 4px) var(--pad-btn-x-sm, 12px);
  font-size: var(--font-size-btn-sm, 12px);
}
.preset button.btn-lg {
  padding: var(--pad-btn-y-lg, 12px) var(--pad-btn-x-lg, 28px);
  font-size: var(--font-size-btn-lg, 16px);
}
/* ── Input states ── */
.preset input.error, .preset textarea.error {
  border-color: var(--error, #B3261E);
  outline-color: var(--error, #B3261E);
}
.preset input.error:focus, .preset textarea.error:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--error, #B3261E) 20%, transparent);
}
.preset input:disabled, .preset input[disabled], .preset textarea:disabled, .preset textarea[disabled] {
  opacity: var(--disabled-opacity, 0.5);
  cursor: not-allowed;
  background: var(--disabled-bg, rgba(0,0,0,0.04));
}
/* ── Select ── */
.preset select {
  display: block;
  width: 100%;
  padding: var(--pad-y, 8px) var(--pad-x, 12px);
  font-family: inherit;
  font-size: var(--font-size-input, 14px);
  color: var(--on-surface, #111);
  background: var(--surface, #fff);
  border: var(--input-border, 1px solid #ccc);
  border-radius: var(--radius-md, 6px);
  outline-offset: 2px;
  transition: var(--motion, 150ms ease);
  cursor: pointer;
  appearance: none;
  background-image: var(--select-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.preset select:focus {
  outline: 2px solid var(--accent, #6750A4);
}
/* ── Checkbox & Radio ── */
.preset .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--font-size-input, 14px);
  color: var(--on-surface, #111);
}
.preset .form-check input[type="checkbox"], .preset .form-check input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #6750A4);
  cursor: pointer;
}
/* ── Toggle switch — CSS-only pill ── */
.preset .toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.preset .toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.preset .toggle-track {
  width: 36px;
  height: 20px;
  background: var(--toggle-off, #ccc);
  border-radius: 10px;
  transition: var(--motion, 150ms ease);
  position: relative;
  flex-shrink: 0;
}
.preset .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: var(--motion, 150ms ease);
}
.preset .toggle-switch input:checked ~ .toggle-track {
  background: var(--accent, #6750A4);
}
.preset .toggle-switch input:checked ~ .toggle-track .toggle-thumb {
  left: 18px;
}
.preset .toggle-switch input:focus-visible ~ .toggle-track {
  outline: 2px solid var(--accent, #6750A4);
  outline-offset: 2px;
}
/* ─── Containers (#008.3) ─── */
/* Card */
.preset .card {
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 8px);
  padding: var(--pad-form, 16px);
  box-shadow: var(--shadow-card, 0 1px 4px rgba(0,0,0,0.12));
  transition: box-shadow var(--motion, 150ms ease);
}
.preset .card-elevated {
  box-shadow: var(--shadow-elevated, 0 4px 16px rgba(0,0,0,0.16));
}
.preset .card-outlined {
  box-shadow: none;
  border: var(--card-border, 1px solid rgba(0,0,0,0.12));
}
.preset .card-interactive {
  cursor: pointer;
}
.preset .card-interactive:hover {
  box-shadow: var(--shadow-elevated, 0 4px 16px rgba(0,0,0,0.16));
}
.preset .card-title {
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 6px;
}
.preset .card-body {
  font-size: 14px;
  color: var(--label-color, #5e6772);
  margin: 0;
}
/* Alert / Banner */
.preset .alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 6px);
  font-size: 13px;
  border-left: 4px solid currentColor;
}
.preset .alert-info { background: var(--info-bg,    rgba(53,132,228,0.10)); color: var(--info,    #1a6cbf); }
.preset .alert-success { background: var(--success-bg, rgba(38,162, 76,0.10)); color: var(--success, #1c7a41); }
.preset .alert-warning { background: var(--warning-bg, rgba(249,177, 45,0.12)); color: var(--warning, #8a6200); }
.preset .alert-error { background: var(--error-bg,   rgba(224, 27, 36,0.10)); color: var(--error,   #b3261e); }
/* Tabs */
.preset .tab-list {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--tab-border, rgba(0,0,0,0.10));
  margin-bottom: 12px;
}
.preset .tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--label-color, #5e6772);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--motion, 150ms ease), border-color var(--motion, 150ms ease);
}
.preset .tab:hover { color: var(--on-surface, #2e3436); }
.preset .tab.active {
  color: var(--accent, #6750A4);
  border-bottom-color: var(--accent, #6750A4);
}
/* Accordion (details/summary) */
.preset .accordion-item {
  border: var(--card-border, 1px solid rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  margin-bottom: 4px;
}
.preset .accordion-item summary {
  list-style: none;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface, #fff);
  color: var(--on-surface, #2e3436);
}
.preset .accordion-item summary::after {
  content: '›';
  transform: rotate(90deg);
  transition: transform var(--motion, 150ms ease);
  font-size: 16px;
  color: var(--label-color, #5e6772);
}
.preset .accordion-item[open] summary::after { transform: rotate(270deg); }
.preset .accordion-item .accordion-body {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--label-color, #5e6772);
  border-top: var(--card-border, 1px solid rgba(0,0,0,0.08));
  background: var(--bg, #fafafa);
}
/* Badge */
.preset .badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--badge-radius, 100px);
  line-height: 1.6;
}
.preset .badge-neutral { background: var(--badge-neutral-bg, rgba(0,0,0,0.08)); color: var(--on-surface, #2e3436); }
.preset .badge-primary { background: var(--accent, #6750A4); color: var(--accent-on, #fff); }
.preset .badge-success { background: var(--success-badge, rgba(38,162,76,0.15)); color: var(--success, #1c7a41); }
.preset .badge-warning { background: var(--warning-badge, rgba(249,177,45,0.18)); color: var(--warning, #8a6200); }
.preset .badge-error { background: var(--error, #B3261E); color: #fff; }
/* ─── Navigation (#008.4) ─── */
/* App bar / Top bar */
.preset .app-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 48px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 6px);
}
.preset .app-bar-title {
  font-weight: 600;
  font-size: 15px;
  flex: 1;
  color: var(--on-surface, #2e3436);
}
.preset .app-bar-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.preset .icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-color, #5e6772);
  font-size: 18px;
  transition: background var(--motion, 150ms ease);
}
.preset .icon-btn:hover { background: var(--btn-ghost-hover, rgba(0,0,0,0.06)); }
/* Breadcrumb */
.preset .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}
.preset .breadcrumb-item {
  color: var(--label-color, #5e6772);
  text-decoration: none;
}
.preset .breadcrumb-item:hover { color: var(--accent, #6750A4); }
.preset .breadcrumb-sep {
  color: var(--label-color, #5e6772);
  opacity: 0.5;
  font-size: 11px;
}
.preset .breadcrumb-item.current {
  color: var(--on-surface, #2e3436);
  font-weight: 500;
  pointer-events: none;
}
/* Pagination */
.preset .pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.preset .page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: var(--card-border, 1px solid rgba(0,0,0,0.12));
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--label-color, #5e6772);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--motion, 150ms ease), color var(--motion, 150ms ease);
}
.preset .page-btn:hover { background: var(--btn-ghost-hover, rgba(0,0,0,0.06)); }
.preset .page-btn.active {
  background: var(--accent, #6750A4);
  color: var(--accent-on, #fff);
  border-color: var(--accent, #6750A4);
}
.preset .page-btn:disabled { opacity: var(--disabled-opacity, 0.4); cursor: not-allowed; }
/* Navigation rail (vertical) */
.preset .nav-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface, #fff);
  border-radius: var(--radius-md, 6px);
  width: fit-content;
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.12));
}
.preset .rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--label-color, #5e6772);
  transition: background var(--motion, 150ms ease), color var(--motion, 150ms ease);
  text-decoration: none;
  white-space: nowrap;
}
.preset .rail-item:hover { background: var(--btn-ghost-hover, rgba(0,0,0,0.06)); color: var(--on-surface, #2e3436); }
.preset .rail-item.active {
  background: var(--rail-active-bg, rgba(53,132,228,0.12));
  color: var(--accent, #3584E4);
}
.preset .rail-icon { font-size: 16px; opacity: 0.8; }
/* ═══════════════════════════════════════════════════════════════
   GRUPO 0 — KODER NATIVE (canonical Stack identity)
   ═══════════════════════════════════════════════════════════════
   The koder preset is the canonical visual identity of every Koder
   product. v0 ships foundational tokens (palette + radius + spacing
   + typography); form elements, containers, navigation, data,
   feedback, and surface-specific tuning ship in subsequent #008
   sub-tickets. Spec: meta/docs/stack/specs/themes/koder-style.kmd.
   ═══════════════════════════════════════════════════════════════ */
/* Verge v1 — Koder Design's canonical visual language. v0 (2026-05-14)
   iniciou em Adwaita 1:1; v1 (owner ratificou 2026-05-28) promove o
   preset OLED-aware (palette "C" do dek#123, 2026-05-25) a default:
   dark variant ganha surfaces near-black ramp + radii bumpados; light
   continua Adwaita-derived (só radii bumpadas pra paridade geométrica).
   Spec: meta/docs/stack/specs/themes/verge.kmd §R4.3. */
/* Verge v1 dark — OLED-aware (verge.kmd §R4.3). Near-black surface ramp
   (NOT pure #000 — preserva elevation cues), on-surface #F4F4F6, hairline
   outline em 5% white. Acompanha bump de radii compartilhado com light. */
/* ─── Data (#008.5) ─── */
/* Data table */
.preset .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.preset .data-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12px;
  color: var(--label-color, #5e6772);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: var(--table-border, 1px solid rgba(0,0,0,0.10));
  background: var(--table-header-bg, rgba(0,0,0,0.03));
}
.preset .data-table td {
  padding: 8px 10px;
  color: var(--on-surface, #2e3436);
  border-bottom: var(--table-border, 1px solid rgba(0,0,0,0.06));
}
.preset .data-table tr:last-child td { border-bottom: none; }
.preset .data-table tbody tr:hover { background: var(--table-row-hover, rgba(0,0,0,0.03)); }
.preset .data-table .col-badge { text-align: center; }
/* Progress bar */
.preset .progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.preset .progress-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--label-color, #5e6772);
}
.preset .progress-track {
  height: 6px;
  background: var(--progress-bg, rgba(0,0,0,0.10));
  border-radius: 100px;
  overflow: hidden;
}
.preset .progress-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--accent, #6750A4);
  transition: width var(--motion, 150ms ease);
}
.preset .progress-fill.success { background: var(--success, #1c7a41); }
.preset .progress-fill.warning { background: var(--warning, #8a6200); }
/* Stat / KPI card */
.preset .stat-card {
  background: var(--surface, #fff);
  border-radius: var(--radius-md, 6px);
  padding: 12px 14px;
  border: var(--card-border, 1px solid rgba(0,0,0,0.10));
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.preset .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--on-surface, #2e3436);
  line-height: 1.2;
}
.preset .stat-value.accent { color: var(--accent, #3584E4); }
.preset .stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--stat-label-color, var(--label-color, #5e6772));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.preset .stat-delta {
  font-size: 12px;
  margin-top: 4px;
}
.preset .stat-delta.up { color: var(--success, #1c7a41); }
.preset .stat-delta.down { color: var(--error, #B3261E); }
/* ─── Typography (#008.7) ─── */
.preset .type-scale { display: flex; flex-direction: column; gap: 4px; }
.preset .type-T1 { font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--on-surface, #2e3436); }
.preset .type-T2 { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--on-surface, #2e3436); }
.preset .type-T3 { font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--on-surface, #2e3436); }
.preset .type-T4 { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--on-surface, #2e3436); }
.preset .type-T5 { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--on-surface, #2e3436); }
.preset .type-T6 { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--on-surface, #2e3436); }
.preset .type-T7 { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--label-color, #5e6772); }
.preset .type-body { font-size: 14px; line-height: 1.6; color: var(--on-surface, #2e3436); }
.preset .type-caption { font-size: 11px; color: var(--label-color, #5e6772); letter-spacing: 0.03em; }
.preset .type-code { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 13px; background: var(--code-bg, rgba(0,0,0,0.06)); padding: 2px 6px; border-radius: var(--radius-sm, 4px); color: var(--code-color, #c0392b); }
.preset .type-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--label-color, #5e6772); }
.preset .type-link { color: var(--accent, #3584E4); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* ─── Layout primitives (#008.8) ─── */
/* Stack (vertical flex) + Row (horizontal flex) */
.preset .stack { display: flex; flex-direction: column; }
.preset .stack-4 { gap: 4px; }
.preset .stack-8 { gap: 8px; }
.preset .stack-16 { gap: 16px; }
.preset .row { display: flex; align-items: center; }
.preset .row-4 { gap: 4px; }
.preset .row-8 { gap: 8px; }
.preset .row-between { justify-content: space-between; }
/* Divider */
.preset .divider {
  border: none;
  border-top: var(--card-border, 1px solid rgba(0,0,0,0.10));
  margin: 8px 0;
}
.preset .divider-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--label-color, #5e6772);
}
.preset .divider-label::before, .preset .divider-label::after {
  content: '';
  flex: 1;
  border-top: var(--card-border, 1px solid rgba(0,0,0,0.10));
}
/* Surface levels */
.preset .surface-0 { background: var(--bg, #fafafa); border-radius: var(--radius-md, 6px); padding: 8px 10px; }
.preset .surface-1 { background: var(--surface, #fff); border-radius: var(--radius-md, 6px); padding: 8px 10px; box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.10)); }
.preset .surface-2 { background: var(--surface-2, #f0f0f0); border-radius: var(--radius-md, 6px); padding: 8px 10px; }
.preset .surface-label { font-size: 11px; color: var(--label-color, #5e6772); font-weight: 500; }
/* Focus ring demo */
.preset .focus-ring-demo {
  outline: var(--focus-ring, 2px solid var(--accent, #3584E4));
  outline-offset: 2px;
}
/* ─── Feedback (#008.6) ─── */
/* Toast / Snackbar */
.preset .toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 6px);
  font-size: 13px;
  background: var(--toast-bg, #2e3436);
  color: var(--toast-fg, #fff);
  box-shadow: var(--shadow-elevated, 0 4px 12px rgba(0,0,0,0.18));
  max-width: 320px;
}
.preset .toast-icon { font-size: 16px; flex-shrink: 0; }
.preset .toast-msg { flex: 1; }
.preset .toast-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #3584E4);
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}
.preset .toast.toast-success { background: var(--success, #1c7a41); }
.preset .toast.toast-error { background: var(--error,   #B3261E); }
/* Spinner (CSS-only) */
.preset .spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--spinner-track, rgba(0,0,0,0.12));
  border-top-color: var(--accent, #3584E4);
  border-radius: 50%;
  animation: kds-spin 0.7s linear infinite;
}
.preset .spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.preset .spinner-lg { width: 36px; height: 36px; border-width: 4px; }
@keyframes kds-spin { to { transform: rotate(360deg); } }
/* Skeleton loader */
.preset .skeleton {
  background: var(--skeleton-bg, rgba(0,0,0,0.08));
  border-radius: var(--radius-sm, 4px);
  animation: kds-shimmer 1.4s ease-in-out infinite;
}
.preset .skeleton-text { height: 12px; margin-bottom: 6px; }
.preset .skeleton-text:last-child { width: 60%; }
.preset .skeleton-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.preset .skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.preset .skeleton-lines { flex: 1; }
@keyframes kds-shimmer {
  0%   { opacity: 1; }
  50%  { opacity: 0.45; }
  100% { opacity: 1; }
}
/* Empty state */
.preset .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
}
.preset .empty-icon { font-size: 32px; opacity: 0.35; }
.preset .empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-surface, #2e3436);
}
.preset .empty-body {
  font-size: 13px;
  color: var(--label-color, #5e6772);
  max-width: 220px;
}
/* ═══════════════════════════════════════════════════════════════
   GRUPO A — OS LOOK-ALIKES (10)
   ═══════════════════════════════════════════════════════════════ */
/* GNOME Adwaita dark — primeira variante artesanal do ticket #007.
   Reference: GNOME Human Interface Guidelines + Adwaita dark palette
   (libadwaita 1.x). Window-bg/card/surface tons distintos pra preservar
   o layering visual; accent mantido (#3584E4) como na Adwaita light.
   Seletor `.themed-dark.preset.gnome` (não `.preset.themed-dark.gnome`)
   pra escapar o regex do css_split.go que cria phantom chunks. */
/* ─── OS-native dark variants — wave A (#007, 2026-05-14) ───────
   Paletas das próprias plataformas (não criativas) — Apple HIG dark,
   Microsoft Fluent dark, iOS dark, Yaru dark, KDE Breeze Dark,
   Material 3 dark, Material 2 dark. Accent geralmente mantido do
   light (a identidade do OS persiste no dark). Surfaces/labels
   adaptados pra dark conforme guideline oficial. */
/* macOS Sonoma dark — Apple HIG dark mode.
   bg = systemBackground (true black-ish) | surface = secondarySystemBackground.
   Label colors per Apple HIG: 0.9 primary / 0.6 secondary (white). */
/* Windows 11 dark — Microsoft Fluent dark Mica.
   Slightly brighter accent #0099E5 (vs light #0067C0) per Win11 dark spec. */
/* iOS Cupertino dark — true-black system background, brighter accent. */
/* Yaru dark — Ubuntu's signature orange accent preserved. */
/* KDE Breeze Dark — official KDE Plasma dark scheme.
   Breeze blue accent preserved; surface tones from Breeze Dark color scheme. */
/* Material 3 dark — Google M3 baseline dark scheme.
   Primary flips: #6750A4 (light) → #D0BCFF (dark), on-primary becomes #381E72.
   Surfaces follow M3 elevation tokens. */
/* Material 2 dark — Material Design 2 dark baseline (Material You predecessor).
   #BB86FC purple per MD2 dark theme spec; true #121212 surface (Material guide). */
/* ─── Documented creative dark variants — wave B partial (#007, 2026-05-14) ───
   8 presets criativos cuja paleta dark é externamente documentada (não
   criativo — segue spec publicada do design system de origem). */
/* shadcn dark (zinc) — shadcn/ui Zinc dark scheme.
   zinc-950 bg, zinc-900 surface, zinc-50 fg, zinc-400 muted label.
   Monochrome accent flips inverso: light fg #18181B → dark fg #FAFAFA. */
/* Carbon (IBM) dark — Carbon Design System "Gray 90" theme.
   bg gray-100 (#161616), surface gray-90 (#262626), text gray-10 (#F4F4F4),
   muted gray-30 (#C6C6C6), accent blue-50 (#4589FF) dark variant. */
/* Notion dark — Notion's published dark theme.
   bg #191919, surface #2F2F2F, fg #FFFFFF, muted #9B9A97.
   Accent #2EAADC preserved from light. */
/* high_contrast — already black/white/yellow at max contrast in light.
   Dark variant identical (max-contrast holds both ways). Document
   explicitly to override the generic fallback so accent yellow
   `#FFFF00` doesn't get diluted by `.themed-dark.preset` defaults. */
/* terminal_classic — CRT phosphor green on black.
   Already dark-first; dark variant affirms tokens (override generic
   fallback so `#33FF33` accent doesn't get lost). */
/* Discord — already dark-by-default (light bg #313338 in spec actually
   IS Discord's dark theme).  Dark variant pushes deeper: chat content
   `#1E1F22`, sidebar `#2B2D31`, message hover `#313338`. */
/* Plasma 6 dark — KDE Plasma 6 Breeze Dark color scheme.
   Same Breeze Dark palette as kde_breeze dark, slightly brighter accent
   (Plasma 6 uses the more saturated `#1d99f3` per upstream). */
/* Dieter Rams dark — Braun design language.
   Less brand than philosophy: minimal, functional, orange accent for
   action only. Dark surface deliberately near-black to preserve the
   "machine grade" feel (Braun TP1 black plastic, T1000 dark gray). */
/* ─── Wave B+ (#007, 2026-05-14) — derivable presets ───
   Mechanical inversions, companion-to-shipped variants, upstream-docs,
   and known-pattern darks. Total artisanal: 24 of 35 presets. */
/* Swiss / International Typographic Style — black/white/red.
   Dark: invert canvas (black bg, white text), red accent preserved.
   Strong typographic intent unchanged. */
/* Brutalist — raw, harsh contrasts. Dark: invert canvas + heavy borders.
   Red accent preserved. 6×6 hard shadows flip from black to white. */
/* Newspaper — serif typography, classic broadsheet. Dark: "evening
   edition" — deep cream-on-charcoal preserving the warm paper feel
   instead of cold pure-white text. */
/* Minimalist Mono — pure monochrome with hairline underlines.
   Dark: invert (black bg, white text, white underline focus). */
/* Fluent Design dark — Microsoft Fluent dark (sibling to windows_11 dark
   already shipped, but Fluent allows more depth + acrylic transparency
   than the Windows 11 Mica variant). */
/* Material Expressive dark — Material 3 Expressive dark variant.
   Inherits material3 dark base + Expressive's brighter accent & wider
   shadow radius for the "lively" feel. */
/* Pantheon dark — elementary OS dark color scheme.
   Background `#3D3D3D` (elementary dark gray), accent `#64BAFF` preserved
   (elementary blue), surface tones `#444`/`#4e4e4e`. */
/* Neumorphism dark — flip the shadow pair: dark shadow + light
   highlight on a dark gray surface. Same shadow-radius pattern, just
   inverted tones. Surface `#2c2f35` is the canonical "dark neumorphic"
   gray (sits between true black and elevated card). */
/* ─── Wave C (#007, 2026-05-14) — movement-derived darks ───
   The remaining 11 presets' dark palettes derived from each preset's
   source aesthetic/design movement. Closes #007. */
/* Bauhaus dark — primary triad (red/yellow/blue) on dark canvas.
   Bauhaus colors are canonical (red, yellow, blue, black, white) —
   "dark Bauhaus" inverts canvas while preserving the triad. */
/* Cyberpunk Neon dark — already dark-first; deepens canvas, accent
   magenta/cyan preserved. Cyberpunk 2077 documented palette
   (#FF00FF magenta, #00FFFF cyan, near-black bg). */
/* Synthwave / Outrun dark — already dark-first; deepens purple bg
   gradient, hot pink + cyan accents preserved. Documented Outrun
   palette: hot pink #FF6EC7, cyan #36F1FE, deep purple #2E1856. */
/* Glassmorphism dark — frosted glass on dark backdrop. Pattern is
   documented (dark gradient bg, semi-transparent surfaces, backdrop
   blur preserved). Accent indigo from light retained. */
/* Memphis Pop dark — Memphis Group (Milan 1981) brights on dark canvas.
   Documented palette: pink, yellow, cyan, black squiggles. Dark version
   inverts canvas (squiggles flip to white on near-black). */
/* Japanese Mu dark — wabi-sabi night. Sumi black canvas + washi cream
   text + indigo accent (Edo period blue, AIZOME). Documented Japanese
   traditional palette: sumi #0F0F0F, ai-iro indigo #3D5A80, kinari
   off-white #F8F4E3. */
/* Mediterranean dark — coastal night palette. Warm terracotta accent
   preserved + cream text on dark warm-tinted surfaces. Documented
   Mediterranean palette: terracotta #C97064, olive #6B7050, cream
   #F5E6D3. Dark = warm-tinted near-black (not cold gray). */
/* Frutiger Aero dark — light-by-definition aesthetic (glossy Win Vista
   / iOS 6 era). Minimal adaptation: dark glossy gradient bg
   preserving the semi-transparent blue surface feel. Not native
   Frutiger Aero (the aesthetic is anti-dark by spec), but provides
   dark-mode coverage for completeness. */
/* Compact Power User dark — IDE/Vim/iTerm style dense functional UI.
   Documented dark palettes: VSCode dark+ (bg #1e1e1e, surface #252526,
   accent #0e639c blue). Power users live in dark by default —
   variant doubles down on the IDE feel. */
/* Windows 95 dark — Win95 had "High Contrast Black" theme + the
   common "Windows Classic Dark" adaptation. Period-appropriate:
   navy chrome (#000080) + #C0C0C0 gray inverted to #404040 dark
   panels with the same chiseled 3D bezels reversed. */
/* Aqua Classic dark — macOS 9-era "Graphite" theme (Apple's documented
   alternative to Aqua blue). Pinstripes survive but tones invert to
   dark grays. Accent shifts from blue to graphite gray per Apple HIG
   System 9. */
/* ═══════════════════════════════════════════════════════════════
   GRUPO B — AESTHETIC PERSONALITIES (9)
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   PROPOSTAS — GRUPO A EXTRA (OS modernos não cobertos) — 4
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   PROPOSTAS — GRUPO B EXTRA (aesthetic) — 5
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   PROPOSTAS — GRUPO C NOVO (Cultural/Regional) — 3
   ═══════════════════════════════════════════════════════════════ */
/* Sprint 10 #030 — 4 modern web framework / product-specific presets
   added 2026-05-10. Each maps to a recognizable design language so
   consumers see the breadth at a glance. Together with the 12 dormant
   presets activated in canonicalPresets the same commit, brings total
   from 19 → 35. */
/* ═══════════════════════════════════════════════════════════════
   GRUPO F — TV PRESETS (Sprint 11 expansion, 2026-05-13)
   10-foot UI guidelines: dark-first canvas, oversized typography,
   prominent focus rings, sparse information density. Variantes
   .themed-light.preset.<slug> definidas pra cobrir TV em modo claro
   (raro — alguns Smart TVs têm modo dia/luz ambiente alta).
   ═══════════════════════════════════════════════════════════════ */
/* 36. Android TV (Leanback / Material You for TV) */
/* 37. Samsung Tizen TV */
/* 38. LG webOS TV */
/* ═══════════════════════════════════════════════════════════════
   GRUPO G — MOST-RELEVANT ALTERNATIVES TO MATERIAL (Sprint 12,
   2026-05-13). Cobre gaps de mercado: productivity moderna,
   Android brasileiro, Apple spatial, enterprise dev tools,
   enterprise Ásia.
   ═══════════════════════════════════════════════════════════════ */
/* 39. Linear — productivity tool de referência 2023+ */
/* 40. Samsung One UI — Android brasileiro dominante */
/* 41. Apple visionOS — spatial computing, glass + depth */
/* 42. Atlassian Design System — enterprise dev tools (Jira/Confluence) */
/* 43. Ant Design — enterprise Ásia, table-heavy patterns */