/* ═══════════════════════════════════════════════════════════════════════════
   BOTSHUB STORES — Design Tokens (single source of truth)
   ═══════════════════════════════════════════════════════════════════════════
   Product aliases extend the canonical shared/design-system/tokens.css.
   All component/module CSS MUST reference these via var(--name).

   ── Identidade visual (Jul 2026) ───────────────────────────────────────────
   Grafite + slate como estrutura, laranja como único acento.

   O painel era azul: fundo navy, borda azul, ícone azul, botão azul, chip
   azul, gráfico azul.  Quando tudo é acento, nada é acento — a tela vira um
   degradê uniforme onde o olho não sabe onde pousar.  É esse o tique que faz
   uma interface parecer gerada e não desenhada.

   A regra desta paleta é de proporção, não de gosto:

     ~90%  neutro    — fundo, card, borda, tabela, texto de corpo
     ~5%   laranja   — a próxima ação, o item ativo, o foco, o número que importa
     ~5%   semântico — sucesso, atenção, erro (só quando há estado real)

   Se uma tela tem dois laranjas competindo, um dos dois está errado.

   ── Convenção de nomes ─────────────────────────────────────────────────────
   Canônicos:   --bg-*, --text-*, --steel-*, --accent-*
   Aliases:     --ds-*, --bh-*, --app-*, --chk-*, --blue-*, --sky-*, --cyan-*
                resolvem para os canônicos.  @deprecated — não criar novos.

   Regra: NENHUM valor de cor, raio, sombra, espaço ou duração hardcoded em
   template, CSS de componente ou CSS de módulo.  Só token.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer tokens {
   :root {
      /* ═════════════════════════════════════════════════════════════════════
       1. TYPOGRAPHY
       ═════════════════════════════════════════════════════════════════════ */
      --font-display: var(--ds-font-body);
      --font-body: var(--ds-font-body);
      --font-mono: var(--ds-font-mono);

      /* Peso — teto da escala é 700.  800/900 engordam o traço da Inter sobre
       fundo escuro e fecham as contraformas (ver §"Peso e caixa alta" no
       DESIGN_SYSTEM.md).  Não criar --font-weight-extrabold/black. */
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;

      /* Size scale — each step includes size + line-height + letter-spacing */
      --text-4xs: 0.5rem;
      /*  8px — icon label, micro badge */
      --text-3xs: 0.6875rem;
      /* 11px — compact counters and dense metadata */
      --text-2xs: 0.75rem;
      /* 12px — compact label, eyebrow */

      /* Legado — .ds-text-label (554 usos) e .ds-text-caption nasceram no
       text-xs padrão do Tailwind (0.75rem), anterior a esta escala.
       --text-xs abaixo é 11px, deliberadamente menor; manter este passo à
       parte evita encolher 500+ rótulos de formulário como efeito colateral
       de fechar a escala — convergir é decisão de design separada. */
      --text-label-size: 0.8125rem;
      /* 13px — readable form labels and captions */

      --text-xs: 0.75rem;
      /* 12px */
      --text-xs-leading: 1.5;
      --text-xs-tracking: 0.01em;

      --text-sm: 0.875rem;
      /* 14px */
      --text-sm-leading: 1.5;
      --text-sm-tracking: 0;

      --text-base: 0.875rem;
      /* 14px */
      --text-base-leading: 1.65;
      --text-base-tracking: 0;

      --text-lg: 1rem;
      /* 16px */
      --text-lg-leading: 1.5;
      --text-lg-tracking: -0.01em;

      --text-xl: 1.125rem;
      /* 18px */
      --text-xl-leading: 1.4;
      --text-xl-tracking: -0.01em;

      --text-2xl: 1.25rem;
      /* 20px */
      --text-2xl-leading: 1.35;
      --text-2xl-tracking: -0.02em;

      --text-3xl: 1.5rem;
      /* 24px */
      --text-3xl-leading: 1.3;
      --text-3xl-tracking: -0.02em;

      --text-4xl: 2rem;
      /* 32px */
      --text-4xl-leading: 1.2;
      --text-4xl-tracking: -0.03em;

      /* Números tabulares — obrigatório em KPI, tabela e moeda.  Dígito de
       largura variável faz coluna de valor "tremer" a cada atualização. */
      --num-features: "tnum" 1, "lnum" 1, "cv05" 1;

      /* ═════════════════════════════════════════════════════════════════════
       2. NEUTRAL RAMP — Steel (grafite frio)
       ═════════════════════════════════════════════════════════════════════
       Uma única rampa neutra para tudo que é estrutura.  Levemente fria
       (matiz ~220) para criar tensão com o laranja sem virar navy. */
      --steel-50: #fafafa;
      --steel-100: #f4f4f5;
      --steel-200: #e4e4e7;
      --steel-300: #d4d4d8;
      --steel-400: #a1a1aa;
      --steel-500: #71717a;
      --steel-600: #52525b;
      --steel-700: #3f3f46;
      --steel-800: #27272a;
      --steel-900: #18181b;
      --steel-950: #09090b;

      /* ═════════════════════════════════════════════════════════════════════
       3. SURFACES
       ═════════════════════════════════════════════════════════════════════
       Quatro degraus, cada um ~1 passo de luminância acima do anterior.  A
       separação entre eles vem da BORDA, não da sombra: sombra escura sobre
       fundo escuro não eleva, borra. */
      --bg-0: var(--ds-color-canvas);
      /* App background — o mais escuro                */
      --bg-1: #121215;
      /* Sidebar, topbar, superfície secundária        */
      --bg-card: var(--ds-color-surface);
      /* Card                                          */
      --bg-card-2: var(--ds-color-surface-raised);
      /* Sub-superfície dentro de card, linha ativa    */
      --bg-inset: #09090b;
      /* Poço: input, code block, célula de tabela zebrada */

      /* Véus sobre superfície — sempre neutros, nunca coloridos.
       --veil-* é branco puro: clareia sem mudar o matiz. */
      --veil-1: rgba(255, 255, 255, 0.02);
      --veil-2: rgba(255, 255, 255, 0.04);
      --veil-3: rgba(255, 255, 255, 0.07);
      --veil-4: rgba(255, 255, 255, 0.10);

      /* --tint-* é a mesma ideia com o cinza da rampa: clareia mantendo o
       matiz frio.  É o fundo dos containers que antes eram tingidos de azul
       (chip, caixa de ícone, faixa de aviso, célula destacada). */
      --tint-1: rgba(161, 161, 170, 0.04);
      --tint-2: rgba(161, 161, 170, 0.07);
      --tint-3: rgba(161, 161, 170, 0.10);
      --tint-4: rgba(161, 161, 170, 0.16);
      --tint-5: rgba(161, 161, 170, 0.24);

      /* ═════════════════════════════════════════════════════════════════════
       4. TEXT
       ═════════════════════════════════════════════════════════════════════
       Três níveis, e só três.  Um quarto nível de cinza não cria hierarquia,
       cria dúvida.  Todos passam AA (≥4.5:1) sobre --bg-card-2, que é o
       fundo mais claro em que texto aparece. */
      --text-1: var(--ds-color-text);
      /* AA 17.6:1 on --bg-0   títulos, valor de KPI     */
      --text-2: var(--ds-color-text-secondary);
      /* AA 11.7:1 on --bg-0   corpo, label de formulário */
      --text-3: var(--ds-color-text-muted);
      /* AA  6.3:1 on --bg-0   muted, hint, timestamp    */
      /*     5.1:1 on --bg-card-2                        */
      --text-4: var(--steel-500);
      /*     5.2:1 on --bg-0   subtle/disabled label     */
      --text-inverse: #09090b;
      /* Texto sobre preenchimento laranja           */

      /* ═════════════════════════════════════════════════════════════════════
       5. ACCENT — Orange (o único acento da interface)
       ═════════════════════════════════════════════════════════════════════
       --accent-3 é a cor da marca.  --accent-4 é a versão para TEXTO sobre
       fundo escuro (8.5:1).  Preenchimento laranja leva texto ESCURO
       (--text-inverse), nunca branco: branco sobre laranja dá 3.6:1 e
       reprova AA — é o erro mais comum de sistema com acento quente. */
      --accent-1: #9a3412;
      /* pressed, borda de estado sólido               */
      --accent-2: var(--ds-color-accent-pressed);
      /* :active de preenchimento                      */
      --accent-3: var(--ds-color-accent);
      /* MARCA — preenchimento sólido, barra ativa     */
      --accent-4: var(--ds-color-accent-hover);
      /* AA 8.5:1 — texto, ícone, link sobre escuro    */
      --accent-5: #fdba74;
      /* hover de texto, realce em gráfico             */

      /* Camadas transparentes do acento — para fundo de chip, linha ativa,
       hover de item de menu.  Alpha baixo de propósito: o laranja marca
       posição, não pinta região. */
      --accent-a08: rgba(249, 115, 22, 0.08);
      --accent-a12: rgba(249, 115, 22, 0.12);
      --accent-a18: rgba(249, 115, 22, 0.18);
      --accent-a28: rgba(249, 115, 22, 0.28);
      --accent-a45: rgba(249, 115, 22, 0.45);

      /* Alpha ultrafinas — para wash/gradiente de fundo quase invisível.
       Usadas por .ds-wash-accent-token e .ds-bg-accent-a06. */
      --accent-a02: rgba(251, 146, 60, 0.02);
      --accent-a06: rgba(251, 146, 60, 0.06);

      --accent-fg: var(--accent-4);
      --accent-bg: var(--accent-a12);
      --accent-border: var(--accent-a28);
      --accent-hover: var(--accent-a18);

      /* ═════════════════════════════════════════════════════════════════════
       6. BORDERS
       ═════════════════════════════════════════════════════════════════════
       Neutras.  Borda colorida em container é decoração: ela promete um
       significado que não existe.  Cor de borda fica para estado real
       (foco, selecionado, erro). */
      --border-xs: rgba(255, 255, 255, 0.09);
      /* divisor interno            */
      --border-sm: var(--ds-color-border);
      /* card, input em repouso     */
      --border-md: var(--ds-color-border-strong);
      /* hover, card destacado      */
      --border-lg: rgba(255, 255, 255, 0.26);
      /* borda de elemento flutuante */

      /* ═════════════════════════════════════════════════════════════════════
       7. GRADIENTS — uso restrito
       ═════════════════════════════════════════════════════════════════════
       Permitido: barra de progresso, série de gráfico, sparkline.
       Proibido: texto, fundo de card, avatar, botão.  Gradiente como
       decoração é o tique visual mais reconhecível de layout gerado. */
      --grad: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
      --grad-soft: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
      --grad-fade: linear-gradient(180deg, rgba(249, 115, 22, 0.16) 0%, rgba(249, 115, 22, 0) 100%);

      /* ═════════════════════════════════════════════════════════════════════
       8. SPACING SCALE
       ═════════════════════════════════════════════════════════════════════ */
      --space-1: var(--ds-space-1);
      /*   4px */
      --space-2: var(--ds-space-2);
      /*   8px */
      --space-3: var(--ds-space-3);
      /*  12px */
      --space-4: var(--ds-space-4);
      /*  16px */
      --space-5: var(--ds-space-5);
      /*  20px */
      --space-6: var(--ds-space-6);
      /*  24px */
      --space-7: 1.75rem;
      /*  28px */
      --space-8: var(--ds-space-8);
      /*  32px */
      --space-9: 2.5rem;
      /*  40px */
      --space-10: 3rem;
      /*  48px */
      --space-11: 4rem;
      /*  64px */
      --space-12: 6rem;
      /*  96px */

      /* Aliases para utilitários ds-* derivados da escala do DS */
      --u-space-05: 0.125rem;
      --u-space-1: var(--space-1);
      --u-space-15: 0.375rem;
      --u-space-2: var(--space-2);
      --u-space-25: 0.625rem;
      --u-space-3: var(--space-3);
      --u-space-35: 0.875rem;
      --u-space-4: var(--space-4);
      --u-space-5: var(--space-5);
      --u-space-6: var(--space-6);
      --u-space-7: var(--space-7);
      --u-space-8: var(--space-8);
      --u-space-9: calc(var(--space-1) * 9);
      --u-space-10: calc(var(--space-1) * 10);
      --u-space-11: calc(var(--space-1) * 11);
      --u-space-12: calc(var(--space-1) * 12);
      --u-space-13: 3.25rem;
      --u-space-14: 3.5rem;
      --u-space-16: 4rem;
      --u-space-20: 5rem;
      --u-space-24: 6rem;
      --u-space-28: 7rem;
      --u-space-32: 8rem;
      --u-space-36: 9rem;
      --u-space-40: 10rem;
      --u-space-44: 11rem;
      --u-space-48: 12rem;
      --u-space-52: 13rem;
      --u-space-56: 14rem;
      --u-space-60: 15rem;
      --u-space-64: 16rem;
      --u-space-72: 18rem;
      --u-space-80: 20rem;
      --u-space-96: 24rem;

      --u-max-w-xs: 20rem;
      --u-max-w-sm: 24rem;
      --u-max-w-md: 28rem;
      --u-max-w-lg: 32rem;
      --u-max-w-xl: 36rem;
      --u-max-w-2xl: 42rem;
      --u-max-w-3xl: 48rem;
      --u-max-w-4xl: 56rem;
      --u-max-w-5xl: 64rem;
      --u-max-w-6xl: 72rem;
      --u-max-w-7xl: 80rem;

      /* ═════════════════════════════════════════════════════════════════════
       9. RADIUS SCALE
       ═════════════════════════════════════════════════════════════════════
       Regra: controle < card < modal.  Raio grande em tudo (botão de 16px,
       card de 16px, hero de 28px) achata a hierarquia. */
      --radius-sm: 0.25rem;
      /*   4px   badges, chips                     */
      --radius-md: 0.375rem;
      /*   6px   inputs pequenos, tags             */
      --radius-lg: var(--ds-radius-control);
      /*   8px   botões, inputs, controles         */
      --radius-xl: var(--ds-radius-card);
      /*  12px   cards, panels                     */
      --radius-2xl: 1rem;
      /*  16px   modais, hero — teto da escala     */
      --radius-full: 9999px;
      /*         pills, avatares, toggles          */

      /* ═════════════════════════════════════════════════════════════════════
       10. ELEVATION
       ═════════════════════════════════════════════════════════════════════
       Sombra só para o que realmente flutua: dropdown, modal, drawer,
       tooltip.  Card não flutua — card tem borda. */
      --shadow-1: 0 1px 2px rgba(3, 5, 8, 0.24);
      --shadow-2: 0 2px 6px rgba(3, 5, 8, 0.32);
      --shadow-3: 0 8px 20px rgba(3, 5, 8, 0.44);
      --shadow-4: 0 18px 44px rgba(3, 5, 8, 0.58);

      /* Legacy shadow aliases (keep for migration) */
      --shadow-card: var(--ds-shadow-card);
      --shadow-hover: var(--shadow-3);

      /* ═════════════════════════════════════════════════════════════════════
       11. SEMANTIC COLORS
       ═════════════════════════════════════════════════════════════════════
       Escolhidas para NÃO colidir com o laranja:
         success  esmeralda  — oposto no círculo cromático
         warning  âmbar CLARO — separado do acento pela luminância (12.6 vs 6.9)
         danger   rosa       — puxado para o magenta, longe do laranja
         info     neutro     — "informação" não precisa de cor; ênfase é o acento
       Todos os -fg passam AA (≥4.5:1) sobre --bg-0. */

      /* Success — Emerald ───────────────────────────────────────────────── */
      --success-fg: var(--ds-color-success);
      /* AA  10.0:1 on --bg-0 */
      --success-bg: rgba(16, 185, 129, 0.12);
      --success-border: rgba(16, 185, 129, 0.24);
      --success-hover: rgba(16, 185, 129, 0.20);
      --success-solid: #10b981;

      /* Warning — Amber claro ──────────────────────────────────────────────
       Mais claro e mais amarelo que o acento de propósito: é o que impede
       "atenção" de ser lido como "ação primária". */
      --warning-fg: var(--ds-color-warning);
      /* AA  12.6:1 on --bg-0 */
      --warning-bg: rgba(250, 204, 21, 0.12);
      --warning-border: rgba(250, 204, 21, 0.24);
      --warning-hover: rgba(250, 204, 21, 0.20);
      --warning-solid: #eab308;

      /* Danger — Rose ──────────────────────────────────────────────────── */
      --danger-fg: var(--ds-color-danger);
      /* AA  7.2:1 on --bg-0 */
      --danger-bg: rgba(244, 63, 94, 0.12);
      --danger-border: rgba(244, 63, 94, 0.26);
      --danger-hover: rgba(244, 63, 94, 0.20);
      --danger-solid: #e11d48;
      --danger-surface: rgba(255, 0, 0, 0.07);
      /* zona de risco, ação destrutiva leve */

      /* Info — Neutro ──────────────────────────────────────────────────────
       Deliberadamente sem cor.  Aviso informativo não é estado nem ação;
       se algo é importante o bastante para colorir, é acento ou atenção. */
      --info-fg: var(--ds-color-info);
      /* AA  8.9:1 on --bg-0 */
      --info-bg: rgba(161, 161, 170, 0.08);
      --info-border: rgba(161, 161, 170, 0.18);
      --info-hover: rgba(161, 161, 170, 0.14);
      --info-solid: var(--steel-500);

      /* Neutral — Steel ────────────────────────────────────────────────── */
      --neutral-fg: var(--steel-400);
      /* AA  5.5:1 on --bg-0 */
      --neutral-bg: rgba(161, 161, 170, 0.07);
      --neutral-border: rgba(161, 161, 170, 0.14);
      --neutral-hover: rgba(161, 161, 170, 0.12);

      /* ═════════════════════════════════════════════════════════════════════
       12. FORM CONTROLS
       ═════════════════════════════════════════════════════════════════════ */
      --input-bg: #12161d;
      --input-bg-hover: #171c24;
      --input-border: var(--border-sm);
      --input-placeholder: var(--steel-500);
      --control-h-sm: 2rem;
      /* 32px */
      --control-h: 2.25rem;
      /* 36px */
      --control-h-lg: 2.75rem;
      /* 44px */

      /* ═════════════════════════════════════════════════════════════════════
       13. FOCUS RING
       ═════════════════════════════════════════════════════════════════════
       Um único token para TODO elemento interativo.  Laranja, porque foco é
       exatamente o tipo de coisa que o acento existe para marcar. */
      --focus-ring: var(--ds-focus-ring);
      --focus-ring-inset: inset 0 0 0 1px var(--accent-3);
      /* Para elemento sobre fundo claro/laranja — anel com "vala" escura */
      --focus-ring-solid: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent-3);

      /* ═════════════════════════════════════════════════════════════════════
       14. ANIMATION
       ═════════════════════════════════════════════════════════════════════ */
      --dur-fast: var(--ds-motion-fast);
      --dur-base: var(--ds-motion-base);
      --dur-slow: 0.35s;

      --ease-out: var(--ds-ease-standard);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

      /* Legacy timing aliases */
      --t-fast: var(--dur-fast);
      --t-base: var(--dur-base);
      --t-slow: var(--dur-slow);

      /* ═════════════════════════════════════════════════════════════════════
       15. DATA VISUALIZATION
       ═════════════════════════════════════════════════════════════════════
       Série categórica para ApexCharts.  Ordem importa: a primeira série é
       a mais importante da tela, então é o acento.  As seguintes descem em
       saturação para não brigar com ela. */
      --viz-1: #f97316;
      /* laranja — série principal    */
      --viz-2: #78859a;
      /* steel                        */
      --viz-3: #34d399;
      /* esmeralda                    */
      --viz-4: #fcd34d;
      /* âmbar                        */
      --viz-5: #fb7185;
      /* rosa                         */
      --viz-6: #aab6c8;
      /* steel claro                  */
      --viz-grid: rgba(161, 161, 170, 0.08);
      --viz-track: rgba(161, 161, 170, 0.10);

      /* ═════════════════════════════════════════════════════════════════════
       16. GLOWS — @deprecated
       ═════════════════════════════════════════════════════════════════════
       Brilho colorido atrás de card/ícone/número é decoração pura e o tique
       visual mais reconhecível de layout gerado.  Os tokens continuam por
       compatibilidade, mas resolvem para nada.

       O valor é uma sombra transparente, não `none`: estes tokens aparecem em
       listas de box-shadow (`var(--shadow-2), var(--glow-primary)`) e `none`
       no meio da lista invalida a declaração inteira. */
      --glow-primary: 0 0 0 rgba(0, 0, 0, 0);
      --glow-success: 0 0 0 rgba(0, 0, 0, 0);
      --glow-amber: 0 0 0 rgba(0, 0, 0, 0);
      --glow-rose: 0 0 0 rgba(0, 0, 0, 0);
      --glow-cyan: 0 0 0 rgba(0, 0, 0, 0);
      --glow-violet: 0 0 0 rgba(0, 0, 0, 0);

      /* ═════════════════════════════════════════════════════════════════════
       17. Z-INDEX — camadas de empilhamento
       ═════════════════════════════════════════════════════════════════════
       Antes de existirem estes tokens, cada tela escolhia o seu: os modais do
       painel usavam z-30, 40, 50, 70, 100, 110, 995 e 999 — e o número crescia
       toda vez que alguém precisava passar na frente de outro.  A ordem certa
       é esta, e ela é curta de propósito:

         sidebar (30/40)  <  drawer de filtros (50/51)  <  MODAL (60)
         <  drawer de conteúdo (61)  <  toast (9999)
         <  dropdown de select/calendário (10000)

       O dropdown fica no topo porque abre DENTRO do modal: se ficasse abaixo,
       um <select> no meio de um formulário abriria atrás do próprio diálogo.
       O toast fica acima do modal porque confirma ação disparada por ele. */
      --z-modal: 60;
      --z-top: 9999;
      /* Confirmação aberta por cima de um modal já aberto (descartar edição,
         excluir a partir do formulário).  Não use para "esse tem que aparecer",
         só quando houver de fato dois modais empilhados. */
      --z-modal-stacked: 70;

      /* ═════════════════════════════════════════════════════════════════════
       18. ALIASES — todos resolvem para os canônicos acima.
           NUNCA sobrescrever com valor hardcoded.  NUNCA criar novos.
       ═════════════════════════════════════════════════════════════════════ */

      /* ── Cores azuis herdadas ────────────────────────────────────────────
       O painel inteiro era azul.  Estes nomes sobrevivem em CSS legado que
       ainda não foi migrado.

       Eles resolvem para o ACENTO, não para steel, porque no CSS de
       componente o azul nunca foi decoração: --blue-2 é a borda do input em
       foco, o checkbox marcado, a aba ativa, a página atual da paginação e
       o passo corrente do stepper — todos estados reais, que é exatamente o
       que o acento existe para marcar.

       O que ERA decoração (fundo tingido de card, borda de container, chip
       neutro) estava nas utilitárias do Tailwind, não aqui, e o codemod
       mandou aquilo para slate.  A separação é essa: token legado = estado,
       utilitária legada = container. */
      --blue-1: var(--accent-2);
      --blue-2: var(--accent-3);
      --blue-3: var(--accent-4);
      --sky-1: var(--accent-2);
      --sky-2: var(--accent-4);
      --cyan-1: var(--accent-4);
      --bg-icon-accent: rgb(40 26 20);
      /* ── @paleta — tokens suplementares para utilitárias DS legadas ─────
       Cores exatas herdadas do style="" inline original, preservadas para
       migração pixel-idêntica.  Para código novo, prefira os tokens
       semânticos: --warning-fg, --danger-fg, --text-3, --success-fg, etc. */
      --amber-400: #fbbf24;
      --amber-500: #f59e0b;
      --amber-200: #fde68a;
      --rose-500: #f43f5e;
      --rose-300: #fda4af;
      --rose-200: #fecaca;
      --red-400: #f87171;
      --yellow-400: #facc15;
      --blue-400: var(--accent-4);
      --green-300: #86efac;
      --violet-400: var(--accent-4);
      --slate-400: #a1a1aa;
      --navy-900: #18181b;
      --brand-blue: var(--accent-3);

      /* ── DS aliases — @deprecated  (migrar para os canônicos) ─────────── */
      --ds-accent: var(--accent-3);
      --ds-accent-2: var(--accent-4);
      --ds-accent-soft: var(--accent-a12);
      --ds-accent-border: var(--accent-a28);
      --ds-bg: var(--bg-0);
      --ds-bg-2: var(--bg-1);
      --ds-bg-3: var(--bg-card);
      --ds-surface: var(--bg-card);
      --ds-surface-md: var(--veil-2);
      --ds-text: var(--text-2);
      --ds-text-dim: var(--text-3);
      --ds-text-white: var(--text-1);
      --ds-border: var(--border-xs);
      --ds-border-md: var(--border-sm);
      --ds-border-strong: var(--border-md);
      --ds-nav-h: 56px;

      /* Legacy card accents (still referenced by .ds-card-accent) */
      --card-accent-bg: var(--accent-a08);
      --card-accent-border: var(--accent-a28);
      --card-accent-hover: var(--accent-a45);
      --icon-accent-bg: var(--accent-a12);
      --icon-accent-border: var(--accent-a28);

      /* ── App aliases (sidebar, dashboard surfaces) ────────────────────── */
      --app-bg: var(--bg-0);
      --app-surface: var(--bg-card);
      --app-surface-soft: var(--bg-card-2);
      --app-border: var(--border-xs);
      --app-border-strong: var(--border-md);
      --app-border-soft: var(--veil-1);
      --app-text: var(--text-1);
      --app-text-muted: var(--text-3);
      --app-text-soft: var(--text-2);
      --app-accent: var(--accent-4);
      --app-accent-strong: var(--accent-3);
      --app-glass: rgba(17, 21, 28, 0.92);
      --app-shadow-sm: var(--shadow-2);

      /* ── BH aliases (BotsHub Home theme — backward compat) ─────────────── */
      --bh-bg-dark: var(--bg-0);
      --bh-bg-card: var(--bg-card);
      --bh-bg-card-2: var(--bg-card-2);
      --bh-bg-overlay: rgba(11, 14, 19, 0.82);
      --bh-border-subtle: var(--border-xs);
      --bh-border-light: var(--border-sm);
      --bh-border-medium: var(--border-md);
      --bh-border-strong: var(--border-lg);
      --bh-text-primary: var(--text-1);
      --bh-text-secondary: var(--text-2);
      --bh-text-tertiary: var(--text-3);
      --bh-text-white: #ffffff;
      --bh-blue-dark: var(--steel-700);
      --bh-blue: var(--steel-500);
      --bh-blue-light: var(--steel-300);
      --bh-sky: var(--steel-400);
      --bh-cyan: var(--steel-400);
      --bh-gradient: var(--grad);
      --bh-gradient-soft: var(--grad-soft);
      --bh-glow: var(--glow-primary);
      --bh-glow-sm: var(--glow-primary);
      --bh-shadow: var(--shadow-3);
      --bh-transition-fast: var(--t-fast);
      --bh-transition-base: var(--t-slow);
      --bh-transition-slow: 0.5s;

      /* Direct bh-* values (used by older home templates) */
      --bh-bg-0: var(--bg-0);
      --bh-bg-1: var(--bg-1);
      --bh-bg-2: var(--bg-0);
      --bh-border-xs: var(--border-xs);
      --bh-border-sm: var(--border-sm);
      --bh-border-md: var(--border-md);
      --bh-border-lg: var(--border-lg);
      --bh-text-1: var(--text-1);
      --bh-text-2: var(--text-2);
      --bh-text-3: var(--text-3);
      --bh-blue-1: var(--steel-700);
      --bh-blue-2: var(--steel-500);
      --bh-blue-3: var(--steel-300);
      --bh-blue-4: var(--steel-600);
      --bh-blue-5: var(--steel-700);
      --bh-blue-6: var(--steel-500);
      --bh-grad: var(--grad);
      --bh-grad-soft: var(--grad-fade);
      --bh-shadow-card: var(--shadow-2);
      --bh-t-fast: var(--dur-fast);
      --bh-t-base: var(--dur-base);
      --bh-t-slow: var(--dur-slow);

      /* ── Checkers module aliases ──────────────────────────────────────── */
      --chk-bg-primary: var(--bg-0);
      --chk-bg-secondary: var(--bg-1);
      --chk-bg-tertiary: var(--bg-0);
      --chk-surface: var(--bg-card);
      --chk-surface-soft: var(--bg-card-2);
      --chk-border-soft: var(--border-xs);
      --chk-border: var(--border-sm);
      --chk-border-strong: var(--border-md);
      --chk-text-primary: var(--text-1);
      --chk-text-secondary: var(--text-2);
      --chk-text-muted: var(--text-3);
      --chk-blue-soft: var(--accent-a08);
      --chk-blue: var(--accent-3);
      --chk-blue-strong: var(--accent-2);
      --chk-blue-light: var(--accent-4);
      --chk-blue-glow: var(--accent-a18);
      --chk-emerald-soft: var(--success-bg);
      --chk-emerald: var(--success-solid);
      --chk-emerald-light: var(--success-fg);
      --chk-amber-soft: var(--warning-bg);
      --chk-amber: var(--warning-solid);
      --chk-amber-light: var(--warning-fg);
      --chk-rose-soft: var(--danger-bg);
      --chk-rose: var(--danger-solid);
      --chk-rose-light: var(--danger-fg);
      --chk-radius-sm: var(--radius-lg);
      --chk-radius: var(--radius-xl);
      --chk-radius-lg: var(--radius-xl);
      --chk-radius-xl: var(--radius-2xl);
      --chk-shadow-sm: var(--shadow-1);
      --chk-shadow: var(--shadow-2);
      --chk-shadow-lg: var(--shadow-3);
      --chk-shadow-glow: var(--glow-primary);
      --chk-transition: var(--dur-base) var(--ease-out);
      --chk-transition-slow: var(--dur-slow) var(--ease-out);

      /* ── Login page ───────────────────────────────────────────────────── */
      --login-gradient-bg: linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 100%);
   }
}