@sbkbs/ui 1.0.6 → 2.0.0-beta.0

package/dist/theme.css

@@ -1,294 +1,327 @@
 /* ============================================================
-   DESIGN SYSTEM - VARIÁVEIS GLOBAIS DE TEMA (@oficios/ui)
-   Guia de marca: cores e tipografia SBK
-   ============================================================ */
+   @sbkbs/ui · Design tokens (Brand Book SBK 2026)
+   Fonte de verdade: docs/SBK_BRAND_GUIDE.md
 
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
+   Camadas:
+   1. Paleta oficial     --sbk-<nome>         (valores literais do brand book)
+   2. Semânticos         --sbk-color-<uso>    (o que os componentes consomem)
+   3. Escalas            --sbk-radius-*, --sbk-shadow-*, --sbk-font-*, --sbk-duration-*
+   4. Aliases legados    --md-*, --brand-*, --bg-*, --text-* (deprecados, removidos na 3.0)
 
-/* ============================================================
-   GUIA DE MARCA - CORES (paleta fixa para referência e paletas)
+   Temas:
+   - Padrão: SBK IA (produto digital)
+   - [data-brand='sbk']: SBK institucional (marca-mãe)
+   - [data-theme='dark']: modo escuro (proposta, a validar com marca)
    ============================================================ */
+
+/* ---------- 1. Paleta oficial ---------- */
 :root {
-  /* Cores principais do guia */
-  --brand-verde-vibrante: #01b2aa;
-  --brand-verde-profundo: #1f3a3a;
-  --brand-grafite-azulado: #0f2f3a;
-  --brand-azul-acinzentado: #5f7b8d;
-  --brand-cinza-medio: #4b4b4b;
-  --brand-cinza-escuro: #24262d;
-  --brand-off-white: #eef0f4; /* Off-White Gelo — cor de fundo oficial SBK */
-  --brand-off-white-gelo: #eef0f4; /* alias explícito */
-  --brand-neutral-75: rgba(238, 240, 244, 0.75);
-  --brand-branco: #ffffff;
-
-  --brand-verde-medio: #2a7a6f; /* tom intermediário turquesa→verde escuro */
-
-  /* DNA da marca - O Criador */
-  --brand-preto: #000000;
-  --brand-cinza: #989495;
-  --brand-azul-lavanda: #777dac;
-  --brand-azul-intenso: #132c3b;
-  --brand-cinza-azulado: #b4c2c7;
-  --brand-verde-lima: #cffe40;
-  --brand-off-white-criador: #e4e4e4;
-  --brand-azul-escuro: #071a5c;
+  /* Primária */
+  --sbk-verde-escuro: #023631;
+  --sbk-ciano-escuro: #075056;
+  --sbk-off-white: #eceff3;
+
+  /* Secundária */
+  --sbk-verde-claro: #0a5a52;
+  --sbk-verde-profundo: #012824;
+  --sbk-ciano: #2a7c79;
+  --sbk-ciano-profundo: #0e4442;
+  --sbk-chumbo-leve: #4a545e;
+  --sbk-preto: #000000;
+  --sbk-branco: #ffffff;
+
+  /* Estados: fora do brand book, PROPOSTA pendente de aprovação da marca.
+     Tons sóbrios, todos com contraste AA (>= 4.5:1) sobre branco. */
+  --sbk-estado-sucesso: #1d6b43;
+  --sbk-estado-alerta: #b45309;
+  --sbk-estado-erro: #b42318;
+  --sbk-estado-info: var(--sbk-ciano-escuro);
 }
 
-/* ============================================================
-   GUIA DE MARCA - TIPOGRAFIA (O Herói / O Criador)
-   Jakarta = headlines fortes; alta legibilidade; estrutura
-   ============================================================ */
+/* ---------- 2 e 3. Semânticos e escalas (tema SBK IA, claro) ---------- */
 :root {
-  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-secondary: 'Plus Jakarta Sans', var(--font-primary);
-  --font-heading: var(--font-primary);
-  --font-body: var(--font-primary);
-  --font-logo: 'Sora', var(--font-primary); /* logo e títulos de marca */
+  /* Fundos e superfícies */
+  --sbk-color-bg: var(--sbk-off-white);
+  --sbk-color-surface: var(--sbk-branco);
+  --sbk-color-surface-sunken: var(--sbk-off-white);
+  --sbk-color-surface-hover: color-mix(in srgb, var(--sbk-verde-escuro) 5%, var(--sbk-branco));
+  --sbk-color-surface-inverse: var(--sbk-verde-escuro);
+  --sbk-color-overlay: color-mix(in srgb, var(--sbk-verde-profundo) 60%, transparent);
+
+  /* Texto */
+  --sbk-color-fg: var(--sbk-preto);
+  --sbk-color-fg-heading: var(--sbk-verde-escuro);
+  --sbk-color-fg-muted: var(--sbk-chumbo-leve);
+  --sbk-color-fg-inverse: var(--sbk-branco);
+
+  /* Linhas: derivadas da paleta. line-strong tem >= 3:1 sobre branco (WCAG 1.4.11) */
+  --sbk-color-line: color-mix(in srgb, var(--sbk-chumbo-leve) 22%, var(--sbk-branco));
+  --sbk-color-line-strong: color-mix(in srgb, var(--sbk-chumbo-leve) 65%, var(--sbk-branco));
+
+  /* Marca */
+  --sbk-color-primary: var(--sbk-verde-claro);
+  --sbk-color-primary-hover: var(--sbk-verde-escuro);
+  --sbk-color-on-primary: var(--sbk-branco);
+  --sbk-color-primary-subtle: color-mix(in srgb, var(--sbk-verde-claro) 10%, var(--sbk-branco));
+  --sbk-color-secondary: var(--sbk-ciano-escuro);
+  --sbk-color-secondary-hover: var(--sbk-ciano-profundo);
+  --sbk-color-on-secondary: var(--sbk-branco);
+  --sbk-color-accent: var(--sbk-ciano);
+  --sbk-color-highlight-bg: var(--sbk-ciano-escuro);
+  --sbk-color-highlight-fg: var(--sbk-branco);
+  --sbk-color-focus: var(--sbk-ciano);
+
+  /* Estados */
+  --sbk-color-success: var(--sbk-estado-sucesso);
+  --sbk-color-success-subtle: color-mix(in srgb, var(--sbk-estado-sucesso) 10%, var(--sbk-branco));
+  --sbk-color-warning: var(--sbk-estado-alerta);
+  --sbk-color-warning-subtle: color-mix(in srgb, var(--sbk-estado-alerta) 10%, var(--sbk-branco));
+  --sbk-color-error: var(--sbk-estado-erro);
+  --sbk-color-error-subtle: color-mix(in srgb, var(--sbk-estado-erro) 10%, var(--sbk-branco));
+  --sbk-color-info: var(--sbk-estado-info);
+  --sbk-color-info-subtle: color-mix(in srgb, var(--sbk-estado-info) 10%, var(--sbk-branco));
+  --sbk-color-on-state: var(--sbk-branco);
+  /* Cores de estado para TEXTO e ícones (no escuro ficam mais claras para manter contraste) */
+  --sbk-color-success-fg: var(--sbk-estado-sucesso);
+  --sbk-color-warning-fg: var(--sbk-estado-alerta);
+  --sbk-color-error-fg: var(--sbk-estado-erro);
+  --sbk-color-info-fg: var(--sbk-estado-info);
+
+  /* Tipografia: somente dois pesos (brand book) */
+  --sbk-font-family: 'Plus Jakarta Sans', Calibri, system-ui, sans-serif;
+  --sbk-font-weight-heading: 600; /* Seminegrito */
+  --sbk-font-weight-body: 300; /* Leve */
+
+  /* Raio: brand book define 8 a 16 para cards e blocos.
+     xs (4px) existe apenas para controles de 16px, como checkbox. */
+  --sbk-radius-xs: 0.25rem;
+  --sbk-radius-sm: 0.5rem;
+  --sbk-radius-md: 0.75rem;
+  --sbk-radius-lg: 1rem;
+
+  /* Sombras leves, tingidas de verde escuro (sem sombras pesadas) */
+  --sbk-shadow-sm: 0 0.0625rem 0.125rem rgb(2 54 49 / 0.06), 0 0.5rem 1.5rem rgb(2 54 49 / 0.05);
+  --sbk-shadow-md: 0 0.25rem 0.5rem rgb(2 54 49 / 0.06), 0 0.75rem 2rem rgb(2 54 49 / 0.1);
+
+  /* Opacidade de cards sobrepostos (brand book: 60% a 90%) */
+  --sbk-card-layer-opacity-1: 0.9;
+  --sbk-card-layer-opacity-2: 0.75;
+  --sbk-card-layer-opacity-3: 0.6;
+
+  /* Movimento */
+  --sbk-duration-fast: 150ms;
+  --sbk-duration-normal: 250ms;
+  --sbk-duration-slow: 400ms;
+  --sbk-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Liquid Glass (opt-in): translucidez tingida de verde, desfoque com saturação,
+     borda especular e brilho interno. Fallback opaco em prefers-reduced-transparency
+     e em navegadores sem backdrop-filter (ver styles/glass.css). */
+  --sbk-glass-bg: color-mix(in srgb, var(--sbk-branco) 55%, transparent);
+  --sbk-glass-bg-strong: color-mix(in srgb, var(--sbk-branco) 72%, transparent);
+  --sbk-glass-tint: color-mix(in srgb, var(--sbk-verde-claro) 6%, transparent);
+  --sbk-glass-border: color-mix(in srgb, var(--sbk-branco) 70%, transparent);
+  --sbk-glass-highlight: color-mix(in srgb, var(--sbk-branco) 85%, transparent);
+  --sbk-glass-blur: 20px;
+  --sbk-glass-saturate: 180%;
+  --sbk-glass-shadow: 0 0.5rem 2rem rgb(2 54 49 / 0.12);
+  --sbk-glass-fallback: var(--sbk-color-surface);
+
+  /* Camadas */
+  --sbk-z-dropdown: 1000;
+  --sbk-z-sticky: 1010;
+  --sbk-z-modal: 1050;
+  --sbk-z-toast: 1100;
+  --sbk-z-tooltip: 1200;
 }
 
-html {
-  font-family: var(--font-body);
-  font-size: 1rem;
+/* ---------- Tema institucional SBK (marca-mãe) ---------- */
+[data-brand='sbk'] {
+  --sbk-color-primary: var(--sbk-verde-escuro);
+  --sbk-color-primary-hover: var(--sbk-verde-profundo);
+  --sbk-color-primary-subtle: color-mix(in srgb, var(--sbk-verde-escuro) 10%, var(--sbk-branco));
+  --sbk-color-accent: var(--sbk-ciano-escuro);
 }
 
+/* ---------- Modo escuro (proposta: o brand book não define tema dark completo) ---------- */
+[data-theme='dark'],
+.theme-dark {
+  --sbk-color-bg: var(--sbk-verde-profundo);
+  --sbk-color-surface: color-mix(in srgb, var(--sbk-verde-escuro) 70%, var(--sbk-verde-profundo));
+  --sbk-color-surface-sunken: var(--sbk-verde-profundo);
+  --sbk-color-surface-hover: color-mix(in srgb, var(--sbk-off-white) 6%, var(--sbk-verde-escuro));
+  /* Blocos de marca (Header, SideNav escuro, Card inverse) continuam escuros no tema escuro */
+  --sbk-color-surface-inverse: var(--sbk-ciano-profundo);
+  --sbk-color-overlay: color-mix(in srgb, var(--sbk-preto) 65%, transparent);
+
+  --sbk-color-fg: var(--sbk-off-white);
+  --sbk-color-fg-heading: var(--sbk-branco);
+  --sbk-color-fg-muted: color-mix(in srgb, var(--sbk-off-white) 72%, var(--sbk-verde-escuro));
+  --sbk-color-fg-inverse: var(--sbk-branco);
+
+  --sbk-color-line: color-mix(in srgb, var(--sbk-off-white) 16%, var(--sbk-verde-escuro));
+  --sbk-color-line-strong: color-mix(in srgb, var(--sbk-off-white) 45%, var(--sbk-verde-escuro));
+
+  --sbk-color-primary: var(--sbk-ciano);
+  --sbk-color-primary-hover: var(--sbk-verde-claro);
+  --sbk-color-on-primary: var(--sbk-branco);
+  --sbk-color-primary-subtle: color-mix(in srgb, var(--sbk-ciano) 22%, var(--sbk-verde-profundo));
+  --sbk-color-secondary: var(--sbk-verde-claro);
+  --sbk-color-secondary-hover: var(--sbk-ciano-escuro);
+  --sbk-color-focus: var(--sbk-off-white);
+
+  --sbk-color-success-fg: color-mix(in srgb, var(--sbk-estado-sucesso) 45%, var(--sbk-branco));
+  --sbk-color-warning-fg: color-mix(in srgb, var(--sbk-estado-alerta) 50%, var(--sbk-branco));
+  --sbk-color-error-fg: color-mix(in srgb, var(--sbk-estado-erro) 45%, var(--sbk-branco));
+  --sbk-color-info-fg: color-mix(in srgb, var(--sbk-ciano) 45%, var(--sbk-branco));
+
+  --sbk-color-success-subtle: color-mix(
+    in srgb,
+    var(--sbk-estado-sucesso) 28%,
+    var(--sbk-verde-profundo)
+  );
+  --sbk-color-warning-subtle: color-mix(
+    in srgb,
+    var(--sbk-estado-alerta) 28%,
+    var(--sbk-verde-profundo)
+  );
+  --sbk-color-error-subtle: color-mix(
+    in srgb,
+    var(--sbk-estado-erro) 28%,
+    var(--sbk-verde-profundo)
+  );
+  --sbk-color-info-subtle: color-mix(in srgb, var(--sbk-ciano) 28%, var(--sbk-verde-profundo));
+
+  --sbk-shadow-sm: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.3), 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
+  --sbk-shadow-md: 0 0.25rem 0.5rem rgb(0 0 0 / 0.3), 0 0.75rem 2rem rgb(0 0 0 / 0.4);
+
+  --sbk-glass-bg: color-mix(in srgb, var(--sbk-verde-escuro) 45%, transparent);
+  --sbk-glass-bg-strong: color-mix(in srgb, var(--sbk-verde-escuro) 65%, transparent);
+  --sbk-glass-tint: color-mix(in srgb, var(--sbk-ciano) 10%, transparent);
+  --sbk-glass-border: color-mix(in srgb, var(--sbk-branco) 18%, transparent);
+  --sbk-glass-highlight: color-mix(in srgb, var(--sbk-branco) 28%, transparent);
+  --sbk-glass-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.35);
+}
+
+/* ============================================================
+   4. ALIASES LEGADOS (1.x): deprecados, serão removidos na 3.0.
+   Mantidos para CSS de consumidores que lê essas variáveis.
+   Os componentes da 2.x NÃO leem estes nomes: sobrescrever
+   --md-primary não altera mais o Button. Use --sbk-color-primary.
+   ============================================================ */
 :root {
-  --primary-color: var(--brand-verde-vibrante);
-  --primary-color-dark: var(--brand-verde-profundo);
-  --primary-color-light: color-mix(in srgb, var(--brand-verde-vibrante) 84%, white);
-  --primary-color-hover: var(--brand-verde-profundo);
-  --md-primary: var(--brand-verde-vibrante);
-  --md-on-primary: #ffffff;
-  --md-primary-container: color-mix(in srgb, var(--brand-verde-vibrante) 18%, white);
-  --md-on-primary-container: var(--brand-grafite-azulado);
-  --secondary-color: var(--brand-grafite-azulado);
-  /* Tokens semânticos para integração com Tailwind */
-  --color-primary: var(--primary-color);
-  --color-on-primary: var(--md-on-primary);
-  --color-secondary: var(--secondary-color);
-  --color-on-secondary: var(--md-on-secondary);
-  --color-surface: var(--md-surface);
-  --color-on-surface: var(--md-on-surface);
-  --color-contrast: var(--brand-verde-lima);
-
-  --md-secondary: var(--brand-grafite-azulado);
-  --md-on-secondary: #ffffff;
-  --md-outline: var(--brand-azul-acinzentado);
-  --md-outline-variant: color-mix(in srgb, var(--brand-azul-acinzentado) 35%, white);
-  --success-color: #22c55e;
-  --success-color-light: #4ade80;
-  --error-color: #ef4444;
-  --error-color-light: #f87171;
-  --md-error: #ba1a1a;
-  --md-on-error: #ffffff;
-  --warning-color: #f59e0b;
-  --warning-color-light: #fbbe24;
-  --info-color: #3b82f6;
-  --info-color-light: #60a5fa;
-  --neutral-color: var(--brand-cinza-medio);
-  --neutral-color-light: var(--brand-azul-acinzentado);
-  --secondary-color-light: var(--brand-azul-acinzentado);
-  --bg-hover: color-mix(in srgb, var(--brand-grafite-azulado) 8%, white);
-  --bg-active: color-mix(in srgb, var(--brand-grafite-azulado) 14%, white);
-  --md-on-surface: var(--brand-grafite-azulado);
-  --accent-color: var(--primary-color);
-  --accent-color-hover: var(--primary-color-hover);
-  --gradient-espectro-turquesa: linear-gradient(
-    135deg,
-    #01b2aa 0%,
-    #1f3a3a 100%
-  ); /* Espectro Turquesa — expressão visual primária SBK */
-  --bg-page: var(--brand-off-white-gelo); /* fundo de página — Off-White Gelo */
-  --bg-primary: var(--brand-off-white-gelo);
-  --bg-secondary: #ffffff;
-  --bg-tertiary: color-mix(in srgb, var(--brand-azul-acinzentado) 14%, white);
-  --md-surface: #ffffff;
-  --md-surface-container: var(--brand-neutral-75);
-  --md-surface-container-high: color-mix(in srgb, var(--brand-azul-acinzentado) 14%, white);
-  --border-color-hover: color-mix(in srgb, var(--brand-grafite-azulado) 32%, white);
-  --bg-card: #ffffff;
-  --bg-card-hover: color-mix(in srgb, var(--brand-azul-acinzentado) 8%, white);
-  --bg-card-border: color-mix(in srgb, var(--brand-azul-acinzentado) 28%, white);
-  --text-primary: var(--brand-grafite-azulado);
-  --text-secondary: var(--brand-cinza-escuro);
-  --text-tertiary: var(--brand-cinza-medio);
-  --text-muted: var(--brand-cinza-medio);
-  --text-on-primary: #ffffff;
-  --border-color: color-mix(in srgb, var(--brand-azul-acinzentado) 30%, white);
-  --border-color-focus: color-mix(in srgb, var(--brand-verde-vibrante) 52%, transparent);
-  --shadow-xs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
-  --shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-md: 1.125rem;
-  --font-size-lg: 1.25rem;
-  --font-size-xl: 1.5rem;
-  --font-weight-normal: 400; /* Jakarta regular */
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600; /* Jakarta seminegrito */
-  --font-weight-bold: 700;
-  --line-height-normal: 1.5;
+  --brand-verde-vibrante: var(--sbk-verde-claro);
+  --brand-verde-profundo: var(--sbk-verde-escuro);
+  --brand-verde-medio: var(--sbk-ciano);
+  --brand-grafite-azulado: var(--sbk-ciano-profundo);
+  --brand-azul-acinzentado: var(--sbk-chumbo-leve);
+  --brand-cinza-medio: var(--sbk-chumbo-leve);
+  --brand-cinza-escuro: var(--sbk-verde-profundo);
+  --brand-off-white: var(--sbk-off-white);
+  --brand-off-white-gelo: var(--sbk-off-white);
+  --brand-branco: var(--sbk-branco);
+  --brand-preto: var(--sbk-preto);
+
+  --font-primary: var(--sbk-font-family);
+  --font-heading: var(--sbk-font-family);
+  --font-body: var(--sbk-font-family);
+  --font-weight-light: 300;
+  --font-weight-semibold: 600;
+
+  --border-radius-sm: var(--sbk-radius-sm);
+  --border-radius-md: var(--sbk-radius-sm);
+  --border-radius-lg: var(--sbk-radius-md);
+  --border-radius-2xl: var(--sbk-radius-lg);
+
+  --z-index-dropdown: var(--sbk-z-dropdown);
+  --z-index-modal-backdrop: var(--sbk-z-modal);
+  --z-index-modal: var(--sbk-z-modal);
+
+  --border-width-thin: 0.0625rem;
+
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
   --spacing-md: 0.75rem;
   --spacing-lg: 1rem;
   --spacing-xl: 1.5rem;
   --spacing-2xl: 2rem;
-  --border-radius-sm: 0.375rem;
-  --border-radius-md: 0.5rem;
-  --border-radius-lg: 0.75rem;
-  --border-width-thin: 0.0625rem;
-  --transition-base: 0.3s ease;
-  --transition-all: all var(--transition-base);
-  --transition-colors:
-    color var(--transition-base), background-color var(--transition-base),
-    border-color var(--transition-base);
+  --spacing-3xl: 2.5rem;
 
-  /* ============================================================
-     MOTION TOKENS — durações e easings padronizados
-     Uso: transition: opacity var(--motion-duration-fast) var(--motion-easing-standard)
-     ============================================================ */
-  --motion-duration-instant: 75ms; /* micro-feedback: ripple, checkbox tick */
-  --motion-duration-fast: 150ms; /* hover, focus, small state changes */
-  --motion-duration-normal: 250ms; /* entrada/saída de elementos pequenos */
-  --motion-duration-slow: 400ms; /* modais, drawers, page transitions */
-  --motion-duration-x-slow: 600ms; /* onboarding, animações elaboradas */
-
-  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* padrão — entrada e saída suave */
-  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /* elementos entrando na tela */
-  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* elementos saindo da tela */
-  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* bounce suave para feedback */
-  --z-index-dropdown: 1000;
-  --z-index-modal-backdrop: 1040;
-  --z-index-modal: 1050;
-  --border-radius-2xl: 1.25rem;
-  --shadow-2xl: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.2);
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-md: 1.125rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
   --font-size-2xl: 1.75rem;
   --font-size-3xl: 2rem;
   --font-size-4xl: 2.5rem;
-  --font-weight-light: 300;
+  /* --font-weight-normal/medium/bold não são redefinidos: colidiriam com as variáveis
+     do Tailwind 4 (font-normal, font-medium, font-bold) nos apps consumidores. */
   --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
   --line-height-relaxed: 1.6;
   --line-height-loose: 1.8;
-  --md-on-surface-variant: #44474e;
-  --spacing-3xl: 2.5rem;
-}
-
-[data-theme='dark'],
-.theme-dark {
-  --bg-page: #0a0d12;
-  --bg-primary: #0f141a;
-  --bg-secondary: #161b22;
-  --bg-tertiary: #1b222b;
-  --bg-card: #161b22;
-  --bg-card-hover: #1e2630;
-  --bg-card-border: #2f3a46;
-  --md-surface: #161b22;
-  --md-surface-container: #1b222b;
-  --md-surface-container-high: #222b35;
-  --md-on-surface: #e6e8eb;
-  --md-on-surface-variant: #c2c7cf;
-  --md-outline-variant: #44474e;
-  --md-primary: var(--brand-verde-vibrante);
-  --md-on-primary: #062126;
-  --primary-color: var(--brand-verde-vibrante);
-  --primary-color-light: color-mix(in srgb, var(--brand-verde-vibrante) 85%, white);
-  --primary-color-hover: var(--brand-verde-profundo);
-  --secondary-color: var(--brand-azul-acinzentado);
-  --color-primary: var(--primary-color);
-  --color-on-primary: var(--md-on-primary);
-  --color-secondary: var(--secondary-color);
-  --color-on-secondary: var(--md-on-secondary);
-  --color-surface: var(--md-surface);
-  --color-on-surface: var(--md-on-surface);
-  --color-contrast: var(--brand-off-white);
-  --text-primary: #e6e8eb;
-  --text-secondary: #d1d5db;
-  --text-muted: #9ca3af;
-  --border-color: #2f3a46;
-  --bg-hover: #202a34;
-  --bg-active: #2a3642;
-  --border-color-hover: #4b5b69;
-  --shadow-sm: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.5);
-  --shadow-lg: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.6);
-}
-
-/* ============================================================
-   PALETAS DE BOTÃO (guia de marca)
-   Use data-button-palette no pai (ex.: body) ou prop palette no Button.
-   ============================================================ */
-[data-button-palette='verde-vibrante'],
-.btn--palette-verde-vibrante.btn--primary {
-  --md-primary: var(--brand-verde-vibrante);
-  --primary-color-hover: var(--brand-verde-profundo);
-}
-[data-button-palette='verde-vibrante'] .btn--primary {
-  --md-primary: var(--brand-verde-vibrante);
-  --primary-color-hover: var(--brand-verde-profundo);
-}
-
-[data-button-palette='verde-profundo'],
-.btn--palette-verde-profundo.btn--primary {
-  --md-primary: var(--brand-verde-profundo);
-  --primary-color-hover: var(--brand-grafite-azulado);
-}
-[data-button-palette='verde-profundo'] .btn--primary {
-  --md-primary: var(--brand-verde-profundo);
-  --primary-color-hover: var(--brand-grafite-azulado);
-}
-
-[data-button-palette='grafite-azulado'],
-.btn--palette-grafite-azulado.btn--primary {
-  --md-primary: var(--brand-grafite-azulado);
-  --primary-color-hover: var(--brand-cinza-escuro);
-}
-[data-button-palette='grafite-azulado'] .btn--primary {
-  --md-primary: var(--brand-grafite-azulado);
-  --primary-color-hover: var(--brand-cinza-escuro);
-}
-
-[data-button-palette='azul-acinzentado'],
-.btn--palette-azul-acinzentado.btn--primary {
-  --md-primary: var(--brand-azul-acinzentado);
-  --primary-color-hover: var(--brand-grafite-azulado);
-}
-[data-button-palette='azul-acinzentado'] .btn--primary {
-  --md-primary: var(--brand-azul-acinzentado);
-  --primary-color-hover: var(--brand-grafite-azulado);
-}
 
-[data-button-palette='cinza-medio'],
-.btn--palette-cinza-medio.btn--primary {
-  --md-primary: var(--brand-cinza-medio);
-  --primary-color-hover: var(--brand-cinza-escuro);
-}
-[data-button-palette='cinza-medio'] .btn--primary {
-  --md-primary: var(--brand-cinza-medio);
-  --primary-color-hover: var(--brand-cinza-escuro);
-}
+  --transition-base: var(--sbk-duration-normal) ease;
+  --transition-all: all var(--transition-base);
+  --transition-colors:
+    color var(--transition-base), background-color var(--transition-base),
+    border-color var(--transition-base);
 
-[data-button-palette='cinza-escuro'],
-.btn--palette-cinza-escuro.btn--primary {
-  --md-primary: var(--brand-cinza-escuro);
-  --primary-color-hover: var(--brand-preto);
-}
-[data-button-palette='cinza-escuro'] .btn--primary {
-  --md-primary: var(--brand-cinza-escuro);
-  --primary-color-hover: var(--brand-preto);
+  --motion-duration-fast: var(--sbk-duration-fast);
+  --motion-duration-normal: var(--sbk-duration-normal);
+  --motion-duration-slow: var(--sbk-duration-slow);
+  --motion-easing-standard: var(--sbk-easing-standard);
 }
 
-[data-button-palette='off-white'],
-.btn--palette-off-white.btn--primary {
-  --md-primary: var(--brand-off-white);
-  --md-on-primary: var(--brand-grafite-azulado);
-  --primary-color-hover: var(--brand-branco);
-}
-[data-button-palette='off-white'] .btn--primary {
-  --md-primary: var(--brand-off-white);
-  --md-on-primary: var(--brand-grafite-azulado);
-  --primary-color-hover: var(--brand-branco);
+:root,
+[data-brand='sbk'],
+[data-theme='dark'],
+.theme-dark {
+  --primary-color: var(--sbk-color-primary);
+  --primary-color-hover: var(--sbk-color-primary-hover);
+  --secondary-color: var(--sbk-color-accent);
+  --accent-color: var(--sbk-color-accent);
+  --md-primary: var(--sbk-color-primary);
+  --md-on-primary: var(--sbk-color-on-primary);
+  --md-primary-container: var(--sbk-color-primary-subtle);
+  --md-secondary: var(--sbk-color-secondary);
+  --md-on-secondary: var(--sbk-branco);
+  --md-surface: var(--sbk-color-surface);
+  --md-on-surface: var(--sbk-color-fg);
+  --md-on-surface-variant: var(--sbk-color-fg-muted);
+  --md-surface-container: var(--sbk-color-surface-sunken);
+  --md-surface-container-high: var(--sbk-color-surface-sunken);
+  --md-outline: var(--sbk-color-line-strong);
+  --md-outline-variant: var(--sbk-color-line);
+  --md-error: var(--sbk-color-error);
+  --md-on-error: var(--sbk-color-on-state);
+  --color-primary: var(--sbk-color-primary);
+  --color-on-primary: var(--sbk-color-on-primary);
+  --color-surface: var(--sbk-color-surface);
+  --color-on-surface: var(--sbk-color-fg);
+  --success-color: var(--sbk-color-success);
+  --warning-color: var(--sbk-color-warning);
+  --error-color: var(--sbk-color-error);
+  --info-color: var(--sbk-color-info);
+  --bg-page: var(--sbk-color-bg);
+  --bg-primary: var(--sbk-color-bg);
+  --bg-secondary: var(--sbk-color-surface);
+  --bg-tertiary: var(--sbk-color-surface-sunken);
+  --bg-card: var(--sbk-color-surface);
+  --bg-card-border: var(--sbk-color-line);
+  --bg-hover: var(--sbk-color-surface-hover);
+  --text-primary: var(--sbk-color-fg);
+  --text-secondary: var(--sbk-color-fg-muted);
+  --text-muted: var(--sbk-color-fg-muted);
+  --text-on-primary: var(--sbk-color-on-primary);
+  --border-color: var(--sbk-color-line);
+  --border-color-hover: var(--sbk-color-line-strong);
+  --border-color-focus: var(--sbk-color-focus);
+  --shadow-sm: var(--sbk-shadow-sm);
+  --shadow-md: var(--sbk-shadow-md);
+  --shadow-lg: var(--sbk-shadow-md);
+  --shadow-xs: var(--sbk-shadow-sm);
+  --md-on-primary-container: var(--sbk-color-fg-heading);
 }