@sbkbs/ui 2.0.0-beta.0 → 2.0.0

package/dist/tokens.css

@@ -1,327 +1,327 @@
-/* ============================================================
-   @sbkbs/ui · Design tokens (Brand Book SBK 2026)
-   Fonte de verdade: docs/SBK_BRAND_GUIDE.md
-
-   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)
-
-   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 {
-  /* 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);
-}
-
-/* ---------- 2 e 3. Semânticos e escalas (tema SBK IA, claro) ---------- */
-:root {
-  /* 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;
-}
-
-/* ---------- 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 {
-  --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;
-  --spacing-3xl: 2.5rem;
-
-  --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-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;
-
-  --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);
-
-  --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);
-}
-
-: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);
-}
+/* ============================================================
+   @sbkbs/ui · Design tokens (Brand Book SBK 2026)
+   Fonte de verdade: docs/SBK_BRAND_GUIDE.md
+
+   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)
+
+   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 {
+  /* 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);
+}
+
+/* ---------- 2 e 3. Semânticos e escalas (tema SBK IA, claro) ---------- */
+:root {
+  /* 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;
+}
+
+/* ---------- 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 {
+  --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;
+  --spacing-3xl: 2.5rem;
+
+  --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-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;
+
+  --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);
+
+  --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);
+}
+
+: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);
+}