@lucasbernardosn/react-ui 0.4.0 → 0.5.0

package/src/theme/theme.css

@@ -66,7 +66,7 @@
    */
   @media (pointer: coarse) {
     body {
-      scrollbar-color: var(--color-gray-8) transparent;
+      scrollbar-color: var(--gray-8) transparent;
     }
   }
 
@@ -80,18 +80,12 @@
 }
 
 /**
- * Variante customizada 'dark:' para aplicar estilos no tema escuro.
+ * Variante `dark:`, ativa num elemento com `data-theme="dark"` e dentro dele. A cor de um token
+ * não usa a variante: o valor da variável já troca com o tema (ver os valores do tema claro, mais
+ * abaixo). Ela serve ao que não é cor de token, como `dark:shadow-none`, e continua ativa dentro
+ * de um `data-theme="light"` aninhado num escuro.
  *
- * Funciona com:
- * - Elementos que possuem [data-theme="dark"] diretamente
- * - Descendentes de elementos com [data-theme="dark"]
- *
- * Exemplo de uso:
- * - dark:bg-gray-1 → aplica bg-gray-1 quando o tema escuro estiver ativo
- * - dark:text-gray-12 → aplica text-gray-12 no tema escuro
- *
- * A variante utiliza :where() para manter especificidade zero (0,0,0),
- * permitindo que outras classes possam sobrescrever os estilos facilmente.
+ * O `:where()` deixa a especificidade em zero: outra classe sobrescreve sem `!important`.
  */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
@@ -323,73 +317,75 @@
       translate: 250% 0;
     }
   }
+}
+
+/**
+ * Mapeamento das cores para o Tailwind (`bg-*`, `text-*`, `border-*` etc.). O `inline` faz a
+ * utility escrever `var(--gray-3)` em vez de `var(--color-gray-3)`: a variável crua é lida no
+ * próprio elemento, e um container com `data-theme` troca o tema só para o que está dentro
+ * dele. Sem o `inline`, o `--color-*` é resolvido no `:root` e o container não muda de cor.
+ *
+ * Cada escala tem 12 passos sólidos (`gray-1` a `gray-12`), 12 alpha (`gray-a1` a `gray-a12`),
+ * o `contrast` (texto sobre o passo 9) e o `surface` (fundo translúcido de uma superfície
+ * tingida). Não há classe sem passo (`bg-gray`): o passo é sempre explícito. As variáveis
+ * cruas (`--gray-3`) são definidas nos blocos claro e escuro mais abaixo, e o papel de cada
+ * passo (fundo, borda, sólido, texto) está no guia de cores (`COLORS.md`). O branco e o preto
+ * puros vêm da paleta do Tailwind (`bg-white`, `var(--color-black)`), iguais nos dois temas.
+ */
+@theme inline {
+  --color-white-a1: var(--white-a1);
+  --color-white-a2: var(--white-a2);
+  --color-white-a3: var(--white-a3);
+  --color-white-a4: var(--white-a4);
+  --color-white-a5: var(--white-a5);
+  --color-white-a6: var(--white-a6);
+  --color-white-a7: var(--white-a7);
+  --color-white-a8: var(--white-a8);
+  --color-white-a9: var(--white-a9);
+  --color-white-a10: var(--white-a10);
+  --color-white-a11: var(--white-a11);
+  --color-white-a12: var(--white-a12);
+
+  --color-black-a1: var(--black-a1);
+  --color-black-a2: var(--black-a2);
+  --color-black-a3: var(--black-a3);
+  --color-black-a4: var(--black-a4);
+  --color-black-a5: var(--black-a5);
+  --color-black-a6: var(--black-a6);
+  --color-black-a7: var(--black-a7);
+  --color-black-a8: var(--black-a8);
+  --color-black-a9: var(--black-a9);
+  --color-black-a10: var(--black-a10);
+  --color-black-a11: var(--black-a11);
+  --color-black-a12: var(--black-a12);
+
+  --color-accent-1: var(--accent-1);
+  --color-accent-2: var(--accent-2);
+  --color-accent-3: var(--accent-3);
+  --color-accent-4: var(--accent-4);
+  --color-accent-5: var(--accent-5);
+  --color-accent-6: var(--accent-6);
+  --color-accent-7: var(--accent-7);
+  --color-accent-8: var(--accent-8);
+  --color-accent-9: var(--accent-9);
+  --color-accent-10: var(--accent-10);
+  --color-accent-11: var(--accent-11);
+  --color-accent-12: var(--accent-12);
+  --color-accent-a1: var(--accent-a1);
+  --color-accent-a2: var(--accent-a2);
+  --color-accent-a3: var(--accent-a3);
+  --color-accent-a4: var(--accent-a4);
+  --color-accent-a5: var(--accent-a5);
+  --color-accent-a6: var(--accent-a6);
+  --color-accent-a7: var(--accent-a7);
+  --color-accent-a8: var(--accent-a8);
+  --color-accent-a9: var(--accent-a9);
+  --color-accent-a10: var(--accent-a10);
+  --color-accent-a11: var(--accent-a11);
+  --color-accent-a12: var(--accent-a12);
+  --color-accent-contrast: var(--accent-contrast);
+  --color-accent-surface: var(--accent-surface);
 
-  /**
-   * Mapeia os tokens de cor do Tailwind (`--color-*`, usados por `bg-*`, `text-*` etc.)
-   * pra variáveis "cruas" (`--brand-9`, `--gray-12` etc.) sobrescritas nos blocos
-   * `:root`/light e `[data-theme="dark"]` mais abaixo — trocar de tema é só trocar
-   * o valor da variável crua, sem duplicar esse mapeamento.
-   *
-   * `--color-brand`/`--color-gray`/etc. (sem sufixo numérico) apontam pro step 9
-   * de cada escala, que na convenção Radix Colors é o tom "solid"/accent — a cor
-   * usada em botões e elementos de destaque.
-   */
-  --color-white: var(--white);
-  --color-white-alpha-1: var(--white-alpha-1);
-  --color-white-alpha-2: var(--white-alpha-2);
-  --color-white-alpha-3: var(--white-alpha-3);
-  --color-white-alpha-4: var(--white-alpha-4);
-  --color-white-alpha-5: var(--white-alpha-5);
-  --color-white-alpha-6: var(--white-alpha-6);
-  --color-white-alpha-7: var(--white-alpha-7);
-  --color-white-alpha-8: var(--white-alpha-8);
-  --color-white-alpha-9: var(--white-alpha-9);
-  --color-white-alpha-10: var(--white-alpha-10);
-  --color-white-alpha-11: var(--white-alpha-11);
-  --color-white-alpha-12: var(--white-alpha-12);
-
-  --color-black: var(--black);
-  --color-black-alpha-1: var(--black-alpha-1);
-  --color-black-alpha-2: var(--black-alpha-2);
-  --color-black-alpha-3: var(--black-alpha-3);
-  --color-black-alpha-4: var(--black-alpha-4);
-  --color-black-alpha-5: var(--black-alpha-5);
-  --color-black-alpha-6: var(--black-alpha-6);
-  --color-black-alpha-7: var(--black-alpha-7);
-  --color-black-alpha-8: var(--black-alpha-8);
-  --color-black-alpha-9: var(--black-alpha-9);
-  --color-black-alpha-10: var(--black-alpha-10);
-  --color-black-alpha-11: var(--black-alpha-11);
-  --color-black-alpha-12: var(--black-alpha-12);
-
-  --color-brand: var(--brand-9);
-  --color-brand-1: var(--brand-1);
-  --color-brand-2: var(--brand-2);
-  --color-brand-3: var(--brand-3);
-  --color-brand-4: var(--brand-4);
-  --color-brand-5: var(--brand-5);
-  --color-brand-6: var(--brand-6);
-  --color-brand-7: var(--brand-7);
-  --color-brand-8: var(--brand-8);
-  --color-brand-9: var(--brand-9);
-  --color-brand-10: var(--brand-10);
-  --color-brand-11: var(--brand-11);
-  --color-brand-12: var(--brand-12);
-
-  --color-brand-alpha-1: var(--brand-alpha-1);
-  --color-brand-alpha-2: var(--brand-alpha-2);
-  --color-brand-alpha-3: var(--brand-alpha-3);
-  --color-brand-alpha-4: var(--brand-alpha-4);
-  --color-brand-alpha-5: var(--brand-alpha-5);
-  --color-brand-alpha-6: var(--brand-alpha-6);
-  --color-brand-alpha-7: var(--brand-alpha-7);
-  --color-brand-alpha-8: var(--brand-alpha-8);
-  --color-brand-alpha-9: var(--brand-alpha-9);
-  --color-brand-alpha-10: var(--brand-alpha-10);
-  --color-brand-alpha-11: var(--brand-alpha-11);
-  --color-brand-alpha-12: var(--brand-alpha-12);
-
-  --color-gray: var(--gray-9);
   --color-gray-1: var(--gray-1);
   --color-gray-2: var(--gray-2);
   --color-gray-3: var(--gray-3);
@@ -402,21 +398,21 @@
   --color-gray-10: var(--gray-10);
   --color-gray-11: var(--gray-11);
   --color-gray-12: var(--gray-12);
+  --color-gray-a1: var(--gray-a1);
+  --color-gray-a2: var(--gray-a2);
+  --color-gray-a3: var(--gray-a3);
+  --color-gray-a4: var(--gray-a4);
+  --color-gray-a5: var(--gray-a5);
+  --color-gray-a6: var(--gray-a6);
+  --color-gray-a7: var(--gray-a7);
+  --color-gray-a8: var(--gray-a8);
+  --color-gray-a9: var(--gray-a9);
+  --color-gray-a10: var(--gray-a10);
+  --color-gray-a11: var(--gray-a11);
+  --color-gray-a12: var(--gray-a12);
+  --color-gray-contrast: var(--gray-contrast);
+  --color-gray-surface: var(--gray-surface);
 
-  --color-gray-alpha-1: var(--gray-alpha-1);
-  --color-gray-alpha-2: var(--gray-alpha-2);
-  --color-gray-alpha-3: var(--gray-alpha-3);
-  --color-gray-alpha-4: var(--gray-alpha-4);
-  --color-gray-alpha-5: var(--gray-alpha-5);
-  --color-gray-alpha-6: var(--gray-alpha-6);
-  --color-gray-alpha-7: var(--gray-alpha-7);
-  --color-gray-alpha-8: var(--gray-alpha-8);
-  --color-gray-alpha-9: var(--gray-alpha-9);
-  --color-gray-alpha-10: var(--gray-alpha-10);
-  --color-gray-alpha-11: var(--gray-alpha-11);
-  --color-gray-alpha-12: var(--gray-alpha-12);
-
-  --color-tomato: var(--tomato-9);
   --color-tomato-1: var(--tomato-1);
   --color-tomato-2: var(--tomato-2);
   --color-tomato-3: var(--tomato-3);
@@ -429,21 +425,21 @@
   --color-tomato-10: var(--tomato-10);
   --color-tomato-11: var(--tomato-11);
   --color-tomato-12: var(--tomato-12);
+  --color-tomato-a1: var(--tomato-a1);
+  --color-tomato-a2: var(--tomato-a2);
+  --color-tomato-a3: var(--tomato-a3);
+  --color-tomato-a4: var(--tomato-a4);
+  --color-tomato-a5: var(--tomato-a5);
+  --color-tomato-a6: var(--tomato-a6);
+  --color-tomato-a7: var(--tomato-a7);
+  --color-tomato-a8: var(--tomato-a8);
+  --color-tomato-a9: var(--tomato-a9);
+  --color-tomato-a10: var(--tomato-a10);
+  --color-tomato-a11: var(--tomato-a11);
+  --color-tomato-a12: var(--tomato-a12);
+  --color-tomato-contrast: var(--tomato-contrast);
+  --color-tomato-surface: var(--tomato-surface);
 
-  --color-tomato-alpha-1: var(--tomato-alpha-1);
-  --color-tomato-alpha-2: var(--tomato-alpha-2);
-  --color-tomato-alpha-3: var(--tomato-alpha-3);
-  --color-tomato-alpha-4: var(--tomato-alpha-4);
-  --color-tomato-alpha-5: var(--tomato-alpha-5);
-  --color-tomato-alpha-6: var(--tomato-alpha-6);
-  --color-tomato-alpha-7: var(--tomato-alpha-7);
-  --color-tomato-alpha-8: var(--tomato-alpha-8);
-  --color-tomato-alpha-9: var(--tomato-alpha-9);
-  --color-tomato-alpha-10: var(--tomato-alpha-10);
-  --color-tomato-alpha-11: var(--tomato-alpha-11);
-  --color-tomato-alpha-12: var(--tomato-alpha-12);
-
-  --color-red: var(--red-9);
   --color-red-1: var(--red-1);
   --color-red-2: var(--red-2);
   --color-red-3: var(--red-3);
@@ -456,21 +452,21 @@
   --color-red-10: var(--red-10);
   --color-red-11: var(--red-11);
   --color-red-12: var(--red-12);
+  --color-red-a1: var(--red-a1);
+  --color-red-a2: var(--red-a2);
+  --color-red-a3: var(--red-a3);
+  --color-red-a4: var(--red-a4);
+  --color-red-a5: var(--red-a5);
+  --color-red-a6: var(--red-a6);
+  --color-red-a7: var(--red-a7);
+  --color-red-a8: var(--red-a8);
+  --color-red-a9: var(--red-a9);
+  --color-red-a10: var(--red-a10);
+  --color-red-a11: var(--red-a11);
+  --color-red-a12: var(--red-a12);
+  --color-red-contrast: var(--red-contrast);
+  --color-red-surface: var(--red-surface);
 
-  --color-red-alpha-1: var(--red-alpha-1);
-  --color-red-alpha-2: var(--red-alpha-2);
-  --color-red-alpha-3: var(--red-alpha-3);
-  --color-red-alpha-4: var(--red-alpha-4);
-  --color-red-alpha-5: var(--red-alpha-5);
-  --color-red-alpha-6: var(--red-alpha-6);
-  --color-red-alpha-7: var(--red-alpha-7);
-  --color-red-alpha-8: var(--red-alpha-8);
-  --color-red-alpha-9: var(--red-alpha-9);
-  --color-red-alpha-10: var(--red-alpha-10);
-  --color-red-alpha-11: var(--red-alpha-11);
-  --color-red-alpha-12: var(--red-alpha-12);
-
-  --color-ruby: var(--ruby-9);
   --color-ruby-1: var(--ruby-1);
   --color-ruby-2: var(--ruby-2);
   --color-ruby-3: var(--ruby-3);
@@ -483,21 +479,21 @@
   --color-ruby-10: var(--ruby-10);
   --color-ruby-11: var(--ruby-11);
   --color-ruby-12: var(--ruby-12);
+  --color-ruby-a1: var(--ruby-a1);
+  --color-ruby-a2: var(--ruby-a2);
+  --color-ruby-a3: var(--ruby-a3);
+  --color-ruby-a4: var(--ruby-a4);
+  --color-ruby-a5: var(--ruby-a5);
+  --color-ruby-a6: var(--ruby-a6);
+  --color-ruby-a7: var(--ruby-a7);
+  --color-ruby-a8: var(--ruby-a8);
+  --color-ruby-a9: var(--ruby-a9);
+  --color-ruby-a10: var(--ruby-a10);
+  --color-ruby-a11: var(--ruby-a11);
+  --color-ruby-a12: var(--ruby-a12);
+  --color-ruby-contrast: var(--ruby-contrast);
+  --color-ruby-surface: var(--ruby-surface);
 
-  --color-ruby-alpha-1: var(--ruby-alpha-1);
-  --color-ruby-alpha-2: var(--ruby-alpha-2);
-  --color-ruby-alpha-3: var(--ruby-alpha-3);
-  --color-ruby-alpha-4: var(--ruby-alpha-4);
-  --color-ruby-alpha-5: var(--ruby-alpha-5);
-  --color-ruby-alpha-6: var(--ruby-alpha-6);
-  --color-ruby-alpha-7: var(--ruby-alpha-7);
-  --color-ruby-alpha-8: var(--ruby-alpha-8);
-  --color-ruby-alpha-9: var(--ruby-alpha-9);
-  --color-ruby-alpha-10: var(--ruby-alpha-10);
-  --color-ruby-alpha-11: var(--ruby-alpha-11);
-  --color-ruby-alpha-12: var(--ruby-alpha-12);
-
-  --color-crimson: var(--crimson-9);
   --color-crimson-1: var(--crimson-1);
   --color-crimson-2: var(--crimson-2);
   --color-crimson-3: var(--crimson-3);
@@ -510,21 +506,21 @@
   --color-crimson-10: var(--crimson-10);
   --color-crimson-11: var(--crimson-11);
   --color-crimson-12: var(--crimson-12);
+  --color-crimson-a1: var(--crimson-a1);
+  --color-crimson-a2: var(--crimson-a2);
+  --color-crimson-a3: var(--crimson-a3);
+  --color-crimson-a4: var(--crimson-a4);
+  --color-crimson-a5: var(--crimson-a5);
+  --color-crimson-a6: var(--crimson-a6);
+  --color-crimson-a7: var(--crimson-a7);
+  --color-crimson-a8: var(--crimson-a8);
+  --color-crimson-a9: var(--crimson-a9);
+  --color-crimson-a10: var(--crimson-a10);
+  --color-crimson-a11: var(--crimson-a11);
+  --color-crimson-a12: var(--crimson-a12);
+  --color-crimson-contrast: var(--crimson-contrast);
+  --color-crimson-surface: var(--crimson-surface);
 
-  --color-crimson-alpha-1: var(--crimson-alpha-1);
-  --color-crimson-alpha-2: var(--crimson-alpha-2);
-  --color-crimson-alpha-3: var(--crimson-alpha-3);
-  --color-crimson-alpha-4: var(--crimson-alpha-4);
-  --color-crimson-alpha-5: var(--crimson-alpha-5);
-  --color-crimson-alpha-6: var(--crimson-alpha-6);
-  --color-crimson-alpha-7: var(--crimson-alpha-7);
-  --color-crimson-alpha-8: var(--crimson-alpha-8);
-  --color-crimson-alpha-9: var(--crimson-alpha-9);
-  --color-crimson-alpha-10: var(--crimson-alpha-10);
-  --color-crimson-alpha-11: var(--crimson-alpha-11);
-  --color-crimson-alpha-12: var(--crimson-alpha-12);
-
-  --color-pink: var(--pink-9);
   --color-pink-1: var(--pink-1);
   --color-pink-2: var(--pink-2);
   --color-pink-3: var(--pink-3);
@@ -537,21 +533,21 @@
   --color-pink-10: var(--pink-10);
   --color-pink-11: var(--pink-11);
   --color-pink-12: var(--pink-12);
+  --color-pink-a1: var(--pink-a1);
+  --color-pink-a2: var(--pink-a2);
+  --color-pink-a3: var(--pink-a3);
+  --color-pink-a4: var(--pink-a4);
+  --color-pink-a5: var(--pink-a5);
+  --color-pink-a6: var(--pink-a6);
+  --color-pink-a7: var(--pink-a7);
+  --color-pink-a8: var(--pink-a8);
+  --color-pink-a9: var(--pink-a9);
+  --color-pink-a10: var(--pink-a10);
+  --color-pink-a11: var(--pink-a11);
+  --color-pink-a12: var(--pink-a12);
+  --color-pink-contrast: var(--pink-contrast);
+  --color-pink-surface: var(--pink-surface);
 
-  --color-pink-alpha-1: var(--pink-alpha-1);
-  --color-pink-alpha-2: var(--pink-alpha-2);
-  --color-pink-alpha-3: var(--pink-alpha-3);
-  --color-pink-alpha-4: var(--pink-alpha-4);
-  --color-pink-alpha-5: var(--pink-alpha-5);
-  --color-pink-alpha-6: var(--pink-alpha-6);
-  --color-pink-alpha-7: var(--pink-alpha-7);
-  --color-pink-alpha-8: var(--pink-alpha-8);
-  --color-pink-alpha-9: var(--pink-alpha-9);
-  --color-pink-alpha-10: var(--pink-alpha-10);
-  --color-pink-alpha-11: var(--pink-alpha-11);
-  --color-pink-alpha-12: var(--pink-alpha-12);
-
-  --color-plum: var(--plum-9);
   --color-plum-1: var(--plum-1);
   --color-plum-2: var(--plum-2);
   --color-plum-3: var(--plum-3);
@@ -564,21 +560,21 @@
   --color-plum-10: var(--plum-10);
   --color-plum-11: var(--plum-11);
   --color-plum-12: var(--plum-12);
+  --color-plum-a1: var(--plum-a1);
+  --color-plum-a2: var(--plum-a2);
+  --color-plum-a3: var(--plum-a3);
+  --color-plum-a4: var(--plum-a4);
+  --color-plum-a5: var(--plum-a5);
+  --color-plum-a6: var(--plum-a6);
+  --color-plum-a7: var(--plum-a7);
+  --color-plum-a8: var(--plum-a8);
+  --color-plum-a9: var(--plum-a9);
+  --color-plum-a10: var(--plum-a10);
+  --color-plum-a11: var(--plum-a11);
+  --color-plum-a12: var(--plum-a12);
+  --color-plum-contrast: var(--plum-contrast);
+  --color-plum-surface: var(--plum-surface);
 
-  --color-plum-alpha-1: var(--plum-alpha-1);
-  --color-plum-alpha-2: var(--plum-alpha-2);
-  --color-plum-alpha-3: var(--plum-alpha-3);
-  --color-plum-alpha-4: var(--plum-alpha-4);
-  --color-plum-alpha-5: var(--plum-alpha-5);
-  --color-plum-alpha-6: var(--plum-alpha-6);
-  --color-plum-alpha-7: var(--plum-alpha-7);
-  --color-plum-alpha-8: var(--plum-alpha-8);
-  --color-plum-alpha-9: var(--plum-alpha-9);
-  --color-plum-alpha-10: var(--plum-alpha-10);
-  --color-plum-alpha-11: var(--plum-alpha-11);
-  --color-plum-alpha-12: var(--plum-alpha-12);
-
-  --color-purple: var(--purple-9);
   --color-purple-1: var(--purple-1);
   --color-purple-2: var(--purple-2);
   --color-purple-3: var(--purple-3);
@@ -591,21 +587,21 @@
   --color-purple-10: var(--purple-10);
   --color-purple-11: var(--purple-11);
   --color-purple-12: var(--purple-12);
+  --color-purple-a1: var(--purple-a1);
+  --color-purple-a2: var(--purple-a2);
+  --color-purple-a3: var(--purple-a3);
+  --color-purple-a4: var(--purple-a4);
+  --color-purple-a5: var(--purple-a5);
+  --color-purple-a6: var(--purple-a6);
+  --color-purple-a7: var(--purple-a7);
+  --color-purple-a8: var(--purple-a8);
+  --color-purple-a9: var(--purple-a9);
+  --color-purple-a10: var(--purple-a10);
+  --color-purple-a11: var(--purple-a11);
+  --color-purple-a12: var(--purple-a12);
+  --color-purple-contrast: var(--purple-contrast);
+  --color-purple-surface: var(--purple-surface);
 
-  --color-purple-alpha-1: var(--purple-alpha-1);
-  --color-purple-alpha-2: var(--purple-alpha-2);
-  --color-purple-alpha-3: var(--purple-alpha-3);
-  --color-purple-alpha-4: var(--purple-alpha-4);
-  --color-purple-alpha-5: var(--purple-alpha-5);
-  --color-purple-alpha-6: var(--purple-alpha-6);
-  --color-purple-alpha-7: var(--purple-alpha-7);
-  --color-purple-alpha-8: var(--purple-alpha-8);
-  --color-purple-alpha-9: var(--purple-alpha-9);
-  --color-purple-alpha-10: var(--purple-alpha-10);
-  --color-purple-alpha-11: var(--purple-alpha-11);
-  --color-purple-alpha-12: var(--purple-alpha-12);
-
-  --color-violet: var(--violet-9);
   --color-violet-1: var(--violet-1);
   --color-violet-2: var(--violet-2);
   --color-violet-3: var(--violet-3);
@@ -618,21 +614,21 @@
   --color-violet-10: var(--violet-10);
   --color-violet-11: var(--violet-11);
   --color-violet-12: var(--violet-12);
+  --color-violet-a1: var(--violet-a1);
+  --color-violet-a2: var(--violet-a2);
+  --color-violet-a3: var(--violet-a3);
+  --color-violet-a4: var(--violet-a4);
+  --color-violet-a5: var(--violet-a5);
+  --color-violet-a6: var(--violet-a6);
+  --color-violet-a7: var(--violet-a7);
+  --color-violet-a8: var(--violet-a8);
+  --color-violet-a9: var(--violet-a9);
+  --color-violet-a10: var(--violet-a10);
+  --color-violet-a11: var(--violet-a11);
+  --color-violet-a12: var(--violet-a12);
+  --color-violet-contrast: var(--violet-contrast);
+  --color-violet-surface: var(--violet-surface);
 
-  --color-violet-alpha-1: var(--violet-alpha-1);
-  --color-violet-alpha-2: var(--violet-alpha-2);
-  --color-violet-alpha-3: var(--violet-alpha-3);
-  --color-violet-alpha-4: var(--violet-alpha-4);
-  --color-violet-alpha-5: var(--violet-alpha-5);
-  --color-violet-alpha-6: var(--violet-alpha-6);
-  --color-violet-alpha-7: var(--violet-alpha-7);
-  --color-violet-alpha-8: var(--violet-alpha-8);
-  --color-violet-alpha-9: var(--violet-alpha-9);
-  --color-violet-alpha-10: var(--violet-alpha-10);
-  --color-violet-alpha-11: var(--violet-alpha-11);
-  --color-violet-alpha-12: var(--violet-alpha-12);
-
-  --color-iris: var(--iris-9);
   --color-iris-1: var(--iris-1);
   --color-iris-2: var(--iris-2);
   --color-iris-3: var(--iris-3);
@@ -645,21 +641,21 @@
   --color-iris-10: var(--iris-10);
   --color-iris-11: var(--iris-11);
   --color-iris-12: var(--iris-12);
+  --color-iris-a1: var(--iris-a1);
+  --color-iris-a2: var(--iris-a2);
+  --color-iris-a3: var(--iris-a3);
+  --color-iris-a4: var(--iris-a4);
+  --color-iris-a5: var(--iris-a5);
+  --color-iris-a6: var(--iris-a6);
+  --color-iris-a7: var(--iris-a7);
+  --color-iris-a8: var(--iris-a8);
+  --color-iris-a9: var(--iris-a9);
+  --color-iris-a10: var(--iris-a10);
+  --color-iris-a11: var(--iris-a11);
+  --color-iris-a12: var(--iris-a12);
+  --color-iris-contrast: var(--iris-contrast);
+  --color-iris-surface: var(--iris-surface);
 
-  --color-iris-alpha-1: var(--iris-alpha-1);
-  --color-iris-alpha-2: var(--iris-alpha-2);
-  --color-iris-alpha-3: var(--iris-alpha-3);
-  --color-iris-alpha-4: var(--iris-alpha-4);
-  --color-iris-alpha-5: var(--iris-alpha-5);
-  --color-iris-alpha-6: var(--iris-alpha-6);
-  --color-iris-alpha-7: var(--iris-alpha-7);
-  --color-iris-alpha-8: var(--iris-alpha-8);
-  --color-iris-alpha-9: var(--iris-alpha-9);
-  --color-iris-alpha-10: var(--iris-alpha-10);
-  --color-iris-alpha-11: var(--iris-alpha-11);
-  --color-iris-alpha-12: var(--iris-alpha-12);
-
-  --color-indigo: var(--indigo-9);
   --color-indigo-1: var(--indigo-1);
   --color-indigo-2: var(--indigo-2);
   --color-indigo-3: var(--indigo-3);
@@ -672,21 +668,21 @@
   --color-indigo-10: var(--indigo-10);
   --color-indigo-11: var(--indigo-11);
   --color-indigo-12: var(--indigo-12);
+  --color-indigo-a1: var(--indigo-a1);
+  --color-indigo-a2: var(--indigo-a2);
+  --color-indigo-a3: var(--indigo-a3);
+  --color-indigo-a4: var(--indigo-a4);
+  --color-indigo-a5: var(--indigo-a5);
+  --color-indigo-a6: var(--indigo-a6);
+  --color-indigo-a7: var(--indigo-a7);
+  --color-indigo-a8: var(--indigo-a8);
+  --color-indigo-a9: var(--indigo-a9);
+  --color-indigo-a10: var(--indigo-a10);
+  --color-indigo-a11: var(--indigo-a11);
+  --color-indigo-a12: var(--indigo-a12);
+  --color-indigo-contrast: var(--indigo-contrast);
+  --color-indigo-surface: var(--indigo-surface);
 
-  --color-indigo-alpha-1: var(--indigo-alpha-1);
-  --color-indigo-alpha-2: var(--indigo-alpha-2);
-  --color-indigo-alpha-3: var(--indigo-alpha-3);
-  --color-indigo-alpha-4: var(--indigo-alpha-4);
-  --color-indigo-alpha-5: var(--indigo-alpha-5);
-  --color-indigo-alpha-6: var(--indigo-alpha-6);
-  --color-indigo-alpha-7: var(--indigo-alpha-7);
-  --color-indigo-alpha-8: var(--indigo-alpha-8);
-  --color-indigo-alpha-9: var(--indigo-alpha-9);
-  --color-indigo-alpha-10: var(--indigo-alpha-10);
-  --color-indigo-alpha-11: var(--indigo-alpha-11);
-  --color-indigo-alpha-12: var(--indigo-alpha-12);
-
-  --color-blue: var(--blue-9);
   --color-blue-1: var(--blue-1);
   --color-blue-2: var(--blue-2);
   --color-blue-3: var(--blue-3);
@@ -699,21 +695,21 @@
   --color-blue-10: var(--blue-10);
   --color-blue-11: var(--blue-11);
   --color-blue-12: var(--blue-12);
+  --color-blue-a1: var(--blue-a1);
+  --color-blue-a2: var(--blue-a2);
+  --color-blue-a3: var(--blue-a3);
+  --color-blue-a4: var(--blue-a4);
+  --color-blue-a5: var(--blue-a5);
+  --color-blue-a6: var(--blue-a6);
+  --color-blue-a7: var(--blue-a7);
+  --color-blue-a8: var(--blue-a8);
+  --color-blue-a9: var(--blue-a9);
+  --color-blue-a10: var(--blue-a10);
+  --color-blue-a11: var(--blue-a11);
+  --color-blue-a12: var(--blue-a12);
+  --color-blue-contrast: var(--blue-contrast);
+  --color-blue-surface: var(--blue-surface);
 
-  --color-blue-alpha-1: var(--blue-alpha-1);
-  --color-blue-alpha-2: var(--blue-alpha-2);
-  --color-blue-alpha-3: var(--blue-alpha-3);
-  --color-blue-alpha-4: var(--blue-alpha-4);
-  --color-blue-alpha-5: var(--blue-alpha-5);
-  --color-blue-alpha-6: var(--blue-alpha-6);
-  --color-blue-alpha-7: var(--blue-alpha-7);
-  --color-blue-alpha-8: var(--blue-alpha-8);
-  --color-blue-alpha-9: var(--blue-alpha-9);
-  --color-blue-alpha-10: var(--blue-alpha-10);
-  --color-blue-alpha-11: var(--blue-alpha-11);
-  --color-blue-alpha-12: var(--blue-alpha-12);
-
-  --color-cyan: var(--cyan-9);
   --color-cyan-1: var(--cyan-1);
   --color-cyan-2: var(--cyan-2);
   --color-cyan-3: var(--cyan-3);
@@ -726,21 +722,21 @@
   --color-cyan-10: var(--cyan-10);
   --color-cyan-11: var(--cyan-11);
   --color-cyan-12: var(--cyan-12);
+  --color-cyan-a1: var(--cyan-a1);
+  --color-cyan-a2: var(--cyan-a2);
+  --color-cyan-a3: var(--cyan-a3);
+  --color-cyan-a4: var(--cyan-a4);
+  --color-cyan-a5: var(--cyan-a5);
+  --color-cyan-a6: var(--cyan-a6);
+  --color-cyan-a7: var(--cyan-a7);
+  --color-cyan-a8: var(--cyan-a8);
+  --color-cyan-a9: var(--cyan-a9);
+  --color-cyan-a10: var(--cyan-a10);
+  --color-cyan-a11: var(--cyan-a11);
+  --color-cyan-a12: var(--cyan-a12);
+  --color-cyan-contrast: var(--cyan-contrast);
+  --color-cyan-surface: var(--cyan-surface);
 
-  --color-cyan-alpha-1: var(--cyan-alpha-1);
-  --color-cyan-alpha-2: var(--cyan-alpha-2);
-  --color-cyan-alpha-3: var(--cyan-alpha-3);
-  --color-cyan-alpha-4: var(--cyan-alpha-4);
-  --color-cyan-alpha-5: var(--cyan-alpha-5);
-  --color-cyan-alpha-6: var(--cyan-alpha-6);
-  --color-cyan-alpha-7: var(--cyan-alpha-7);
-  --color-cyan-alpha-8: var(--cyan-alpha-8);
-  --color-cyan-alpha-9: var(--cyan-alpha-9);
-  --color-cyan-alpha-10: var(--cyan-alpha-10);
-  --color-cyan-alpha-11: var(--cyan-alpha-11);
-  --color-cyan-alpha-12: var(--cyan-alpha-12);
-
-  --color-teal: var(--teal-9);
   --color-teal-1: var(--teal-1);
   --color-teal-2: var(--teal-2);
   --color-teal-3: var(--teal-3);
@@ -753,21 +749,21 @@
   --color-teal-10: var(--teal-10);
   --color-teal-11: var(--teal-11);
   --color-teal-12: var(--teal-12);
+  --color-teal-a1: var(--teal-a1);
+  --color-teal-a2: var(--teal-a2);
+  --color-teal-a3: var(--teal-a3);
+  --color-teal-a4: var(--teal-a4);
+  --color-teal-a5: var(--teal-a5);
+  --color-teal-a6: var(--teal-a6);
+  --color-teal-a7: var(--teal-a7);
+  --color-teal-a8: var(--teal-a8);
+  --color-teal-a9: var(--teal-a9);
+  --color-teal-a10: var(--teal-a10);
+  --color-teal-a11: var(--teal-a11);
+  --color-teal-a12: var(--teal-a12);
+  --color-teal-contrast: var(--teal-contrast);
+  --color-teal-surface: var(--teal-surface);
 
-  --color-teal-alpha-1: var(--teal-alpha-1);
-  --color-teal-alpha-2: var(--teal-alpha-2);
-  --color-teal-alpha-3: var(--teal-alpha-3);
-  --color-teal-alpha-4: var(--teal-alpha-4);
-  --color-teal-alpha-5: var(--teal-alpha-5);
-  --color-teal-alpha-6: var(--teal-alpha-6);
-  --color-teal-alpha-7: var(--teal-alpha-7);
-  --color-teal-alpha-8: var(--teal-alpha-8);
-  --color-teal-alpha-9: var(--teal-alpha-9);
-  --color-teal-alpha-10: var(--teal-alpha-10);
-  --color-teal-alpha-11: var(--teal-alpha-11);
-  --color-teal-alpha-12: var(--teal-alpha-12);
-
-  --color-jade: var(--jade-9);
   --color-jade-1: var(--jade-1);
   --color-jade-2: var(--jade-2);
   --color-jade-3: var(--jade-3);
@@ -780,21 +776,21 @@
   --color-jade-10: var(--jade-10);
   --color-jade-11: var(--jade-11);
   --color-jade-12: var(--jade-12);
+  --color-jade-a1: var(--jade-a1);
+  --color-jade-a2: var(--jade-a2);
+  --color-jade-a3: var(--jade-a3);
+  --color-jade-a4: var(--jade-a4);
+  --color-jade-a5: var(--jade-a5);
+  --color-jade-a6: var(--jade-a6);
+  --color-jade-a7: var(--jade-a7);
+  --color-jade-a8: var(--jade-a8);
+  --color-jade-a9: var(--jade-a9);
+  --color-jade-a10: var(--jade-a10);
+  --color-jade-a11: var(--jade-a11);
+  --color-jade-a12: var(--jade-a12);
+  --color-jade-contrast: var(--jade-contrast);
+  --color-jade-surface: var(--jade-surface);
 
-  --color-jade-alpha-1: var(--jade-alpha-1);
-  --color-jade-alpha-2: var(--jade-alpha-2);
-  --color-jade-alpha-3: var(--jade-alpha-3);
-  --color-jade-alpha-4: var(--jade-alpha-4);
-  --color-jade-alpha-5: var(--jade-alpha-5);
-  --color-jade-alpha-6: var(--jade-alpha-6);
-  --color-jade-alpha-7: var(--jade-alpha-7);
-  --color-jade-alpha-8: var(--jade-alpha-8);
-  --color-jade-alpha-9: var(--jade-alpha-9);
-  --color-jade-alpha-10: var(--jade-alpha-10);
-  --color-jade-alpha-11: var(--jade-alpha-11);
-  --color-jade-alpha-12: var(--jade-alpha-12);
-
-  --color-green: var(--green-9);
   --color-green-1: var(--green-1);
   --color-green-2: var(--green-2);
   --color-green-3: var(--green-3);
@@ -807,21 +803,21 @@
   --color-green-10: var(--green-10);
   --color-green-11: var(--green-11);
   --color-green-12: var(--green-12);
+  --color-green-a1: var(--green-a1);
+  --color-green-a2: var(--green-a2);
+  --color-green-a3: var(--green-a3);
+  --color-green-a4: var(--green-a4);
+  --color-green-a5: var(--green-a5);
+  --color-green-a6: var(--green-a6);
+  --color-green-a7: var(--green-a7);
+  --color-green-a8: var(--green-a8);
+  --color-green-a9: var(--green-a9);
+  --color-green-a10: var(--green-a10);
+  --color-green-a11: var(--green-a11);
+  --color-green-a12: var(--green-a12);
+  --color-green-contrast: var(--green-contrast);
+  --color-green-surface: var(--green-surface);
 
-  --color-green-alpha-1: var(--green-alpha-1);
-  --color-green-alpha-2: var(--green-alpha-2);
-  --color-green-alpha-3: var(--green-alpha-3);
-  --color-green-alpha-4: var(--green-alpha-4);
-  --color-green-alpha-5: var(--green-alpha-5);
-  --color-green-alpha-6: var(--green-alpha-6);
-  --color-green-alpha-7: var(--green-alpha-7);
-  --color-green-alpha-8: var(--green-alpha-8);
-  --color-green-alpha-9: var(--green-alpha-9);
-  --color-green-alpha-10: var(--green-alpha-10);
-  --color-green-alpha-11: var(--green-alpha-11);
-  --color-green-alpha-12: var(--green-alpha-12);
-
-  --color-grass: var(--grass-9);
   --color-grass-1: var(--grass-1);
   --color-grass-2: var(--grass-2);
   --color-grass-3: var(--grass-3);
@@ -834,21 +830,21 @@
   --color-grass-10: var(--grass-10);
   --color-grass-11: var(--grass-11);
   --color-grass-12: var(--grass-12);
+  --color-grass-a1: var(--grass-a1);
+  --color-grass-a2: var(--grass-a2);
+  --color-grass-a3: var(--grass-a3);
+  --color-grass-a4: var(--grass-a4);
+  --color-grass-a5: var(--grass-a5);
+  --color-grass-a6: var(--grass-a6);
+  --color-grass-a7: var(--grass-a7);
+  --color-grass-a8: var(--grass-a8);
+  --color-grass-a9: var(--grass-a9);
+  --color-grass-a10: var(--grass-a10);
+  --color-grass-a11: var(--grass-a11);
+  --color-grass-a12: var(--grass-a12);
+  --color-grass-contrast: var(--grass-contrast);
+  --color-grass-surface: var(--grass-surface);
 
-  --color-grass-alpha-1: var(--grass-alpha-1);
-  --color-grass-alpha-2: var(--grass-alpha-2);
-  --color-grass-alpha-3: var(--grass-alpha-3);
-  --color-grass-alpha-4: var(--grass-alpha-4);
-  --color-grass-alpha-5: var(--grass-alpha-5);
-  --color-grass-alpha-6: var(--grass-alpha-6);
-  --color-grass-alpha-7: var(--grass-alpha-7);
-  --color-grass-alpha-8: var(--grass-alpha-8);
-  --color-grass-alpha-9: var(--grass-alpha-9);
-  --color-grass-alpha-10: var(--grass-alpha-10);
-  --color-grass-alpha-11: var(--grass-alpha-11);
-  --color-grass-alpha-12: var(--grass-alpha-12);
-
-  --color-brown: var(--brown-9);
   --color-brown-1: var(--brown-1);
   --color-brown-2: var(--brown-2);
   --color-brown-3: var(--brown-3);
@@ -861,21 +857,21 @@
   --color-brown-10: var(--brown-10);
   --color-brown-11: var(--brown-11);
   --color-brown-12: var(--brown-12);
+  --color-brown-a1: var(--brown-a1);
+  --color-brown-a2: var(--brown-a2);
+  --color-brown-a3: var(--brown-a3);
+  --color-brown-a4: var(--brown-a4);
+  --color-brown-a5: var(--brown-a5);
+  --color-brown-a6: var(--brown-a6);
+  --color-brown-a7: var(--brown-a7);
+  --color-brown-a8: var(--brown-a8);
+  --color-brown-a9: var(--brown-a9);
+  --color-brown-a10: var(--brown-a10);
+  --color-brown-a11: var(--brown-a11);
+  --color-brown-a12: var(--brown-a12);
+  --color-brown-contrast: var(--brown-contrast);
+  --color-brown-surface: var(--brown-surface);
 
-  --color-brown-alpha-1: var(--brown-alpha-1);
-  --color-brown-alpha-2: var(--brown-alpha-2);
-  --color-brown-alpha-3: var(--brown-alpha-3);
-  --color-brown-alpha-4: var(--brown-alpha-4);
-  --color-brown-alpha-5: var(--brown-alpha-5);
-  --color-brown-alpha-6: var(--brown-alpha-6);
-  --color-brown-alpha-7: var(--brown-alpha-7);
-  --color-brown-alpha-8: var(--brown-alpha-8);
-  --color-brown-alpha-9: var(--brown-alpha-9);
-  --color-brown-alpha-10: var(--brown-alpha-10);
-  --color-brown-alpha-11: var(--brown-alpha-11);
-  --color-brown-alpha-12: var(--brown-alpha-12);
-
-  --color-bronze: var(--bronze-9);
   --color-bronze-1: var(--bronze-1);
   --color-bronze-2: var(--bronze-2);
   --color-bronze-3: var(--bronze-3);
@@ -888,21 +884,21 @@
   --color-bronze-10: var(--bronze-10);
   --color-bronze-11: var(--bronze-11);
   --color-bronze-12: var(--bronze-12);
+  --color-bronze-a1: var(--bronze-a1);
+  --color-bronze-a2: var(--bronze-a2);
+  --color-bronze-a3: var(--bronze-a3);
+  --color-bronze-a4: var(--bronze-a4);
+  --color-bronze-a5: var(--bronze-a5);
+  --color-bronze-a6: var(--bronze-a6);
+  --color-bronze-a7: var(--bronze-a7);
+  --color-bronze-a8: var(--bronze-a8);
+  --color-bronze-a9: var(--bronze-a9);
+  --color-bronze-a10: var(--bronze-a10);
+  --color-bronze-a11: var(--bronze-a11);
+  --color-bronze-a12: var(--bronze-a12);
+  --color-bronze-contrast: var(--bronze-contrast);
+  --color-bronze-surface: var(--bronze-surface);
 
-  --color-bronze-alpha-1: var(--bronze-alpha-1);
-  --color-bronze-alpha-2: var(--bronze-alpha-2);
-  --color-bronze-alpha-3: var(--bronze-alpha-3);
-  --color-bronze-alpha-4: var(--bronze-alpha-4);
-  --color-bronze-alpha-5: var(--bronze-alpha-5);
-  --color-bronze-alpha-6: var(--bronze-alpha-6);
-  --color-bronze-alpha-7: var(--bronze-alpha-7);
-  --color-bronze-alpha-8: var(--bronze-alpha-8);
-  --color-bronze-alpha-9: var(--bronze-alpha-9);
-  --color-bronze-alpha-10: var(--bronze-alpha-10);
-  --color-bronze-alpha-11: var(--bronze-alpha-11);
-  --color-bronze-alpha-12: var(--bronze-alpha-12);
-
-  --color-gold: var(--gold-9);
   --color-gold-1: var(--gold-1);
   --color-gold-2: var(--gold-2);
   --color-gold-3: var(--gold-3);
@@ -915,21 +911,21 @@
   --color-gold-10: var(--gold-10);
   --color-gold-11: var(--gold-11);
   --color-gold-12: var(--gold-12);
+  --color-gold-a1: var(--gold-a1);
+  --color-gold-a2: var(--gold-a2);
+  --color-gold-a3: var(--gold-a3);
+  --color-gold-a4: var(--gold-a4);
+  --color-gold-a5: var(--gold-a5);
+  --color-gold-a6: var(--gold-a6);
+  --color-gold-a7: var(--gold-a7);
+  --color-gold-a8: var(--gold-a8);
+  --color-gold-a9: var(--gold-a9);
+  --color-gold-a10: var(--gold-a10);
+  --color-gold-a11: var(--gold-a11);
+  --color-gold-a12: var(--gold-a12);
+  --color-gold-contrast: var(--gold-contrast);
+  --color-gold-surface: var(--gold-surface);
 
-  --color-gold-alpha-1: var(--gold-alpha-1);
-  --color-gold-alpha-2: var(--gold-alpha-2);
-  --color-gold-alpha-3: var(--gold-alpha-3);
-  --color-gold-alpha-4: var(--gold-alpha-4);
-  --color-gold-alpha-5: var(--gold-alpha-5);
-  --color-gold-alpha-6: var(--gold-alpha-6);
-  --color-gold-alpha-7: var(--gold-alpha-7);
-  --color-gold-alpha-8: var(--gold-alpha-8);
-  --color-gold-alpha-9: var(--gold-alpha-9);
-  --color-gold-alpha-10: var(--gold-alpha-10);
-  --color-gold-alpha-11: var(--gold-alpha-11);
-  --color-gold-alpha-12: var(--gold-alpha-12);
-
-  --color-sky: var(--sky-9);
   --color-sky-1: var(--sky-1);
   --color-sky-2: var(--sky-2);
   --color-sky-3: var(--sky-3);
@@ -942,21 +938,21 @@
   --color-sky-10: var(--sky-10);
   --color-sky-11: var(--sky-11);
   --color-sky-12: var(--sky-12);
+  --color-sky-a1: var(--sky-a1);
+  --color-sky-a2: var(--sky-a2);
+  --color-sky-a3: var(--sky-a3);
+  --color-sky-a4: var(--sky-a4);
+  --color-sky-a5: var(--sky-a5);
+  --color-sky-a6: var(--sky-a6);
+  --color-sky-a7: var(--sky-a7);
+  --color-sky-a8: var(--sky-a8);
+  --color-sky-a9: var(--sky-a9);
+  --color-sky-a10: var(--sky-a10);
+  --color-sky-a11: var(--sky-a11);
+  --color-sky-a12: var(--sky-a12);
+  --color-sky-contrast: var(--sky-contrast);
+  --color-sky-surface: var(--sky-surface);
 
-  --color-sky-alpha-1: var(--sky-alpha-1);
-  --color-sky-alpha-2: var(--sky-alpha-2);
-  --color-sky-alpha-3: var(--sky-alpha-3);
-  --color-sky-alpha-4: var(--sky-alpha-4);
-  --color-sky-alpha-5: var(--sky-alpha-5);
-  --color-sky-alpha-6: var(--sky-alpha-6);
-  --color-sky-alpha-7: var(--sky-alpha-7);
-  --color-sky-alpha-8: var(--sky-alpha-8);
-  --color-sky-alpha-9: var(--sky-alpha-9);
-  --color-sky-alpha-10: var(--sky-alpha-10);
-  --color-sky-alpha-11: var(--sky-alpha-11);
-  --color-sky-alpha-12: var(--sky-alpha-12);
-
-  --color-mint: var(--mint-9);
   --color-mint-1: var(--mint-1);
   --color-mint-2: var(--mint-2);
   --color-mint-3: var(--mint-3);
@@ -969,21 +965,21 @@
   --color-mint-10: var(--mint-10);
   --color-mint-11: var(--mint-11);
   --color-mint-12: var(--mint-12);
+  --color-mint-a1: var(--mint-a1);
+  --color-mint-a2: var(--mint-a2);
+  --color-mint-a3: var(--mint-a3);
+  --color-mint-a4: var(--mint-a4);
+  --color-mint-a5: var(--mint-a5);
+  --color-mint-a6: var(--mint-a6);
+  --color-mint-a7: var(--mint-a7);
+  --color-mint-a8: var(--mint-a8);
+  --color-mint-a9: var(--mint-a9);
+  --color-mint-a10: var(--mint-a10);
+  --color-mint-a11: var(--mint-a11);
+  --color-mint-a12: var(--mint-a12);
+  --color-mint-contrast: var(--mint-contrast);
+  --color-mint-surface: var(--mint-surface);
 
-  --color-mint-alpha-1: var(--mint-alpha-1);
-  --color-mint-alpha-2: var(--mint-alpha-2);
-  --color-mint-alpha-3: var(--mint-alpha-3);
-  --color-mint-alpha-4: var(--mint-alpha-4);
-  --color-mint-alpha-5: var(--mint-alpha-5);
-  --color-mint-alpha-6: var(--mint-alpha-6);
-  --color-mint-alpha-7: var(--mint-alpha-7);
-  --color-mint-alpha-8: var(--mint-alpha-8);
-  --color-mint-alpha-9: var(--mint-alpha-9);
-  --color-mint-alpha-10: var(--mint-alpha-10);
-  --color-mint-alpha-11: var(--mint-alpha-11);
-  --color-mint-alpha-12: var(--mint-alpha-12);
-
-  --color-lime: var(--lime-9);
   --color-lime-1: var(--lime-1);
   --color-lime-2: var(--lime-2);
   --color-lime-3: var(--lime-3);
@@ -996,21 +992,21 @@
   --color-lime-10: var(--lime-10);
   --color-lime-11: var(--lime-11);
   --color-lime-12: var(--lime-12);
+  --color-lime-a1: var(--lime-a1);
+  --color-lime-a2: var(--lime-a2);
+  --color-lime-a3: var(--lime-a3);
+  --color-lime-a4: var(--lime-a4);
+  --color-lime-a5: var(--lime-a5);
+  --color-lime-a6: var(--lime-a6);
+  --color-lime-a7: var(--lime-a7);
+  --color-lime-a8: var(--lime-a8);
+  --color-lime-a9: var(--lime-a9);
+  --color-lime-a10: var(--lime-a10);
+  --color-lime-a11: var(--lime-a11);
+  --color-lime-a12: var(--lime-a12);
+  --color-lime-contrast: var(--lime-contrast);
+  --color-lime-surface: var(--lime-surface);
 
-  --color-lime-alpha-1: var(--lime-alpha-1);
-  --color-lime-alpha-2: var(--lime-alpha-2);
-  --color-lime-alpha-3: var(--lime-alpha-3);
-  --color-lime-alpha-4: var(--lime-alpha-4);
-  --color-lime-alpha-5: var(--lime-alpha-5);
-  --color-lime-alpha-6: var(--lime-alpha-6);
-  --color-lime-alpha-7: var(--lime-alpha-7);
-  --color-lime-alpha-8: var(--lime-alpha-8);
-  --color-lime-alpha-9: var(--lime-alpha-9);
-  --color-lime-alpha-10: var(--lime-alpha-10);
-  --color-lime-alpha-11: var(--lime-alpha-11);
-  --color-lime-alpha-12: var(--lime-alpha-12);
-
-  --color-yellow: var(--yellow-9);
   --color-yellow-1: var(--yellow-1);
   --color-yellow-2: var(--yellow-2);
   --color-yellow-3: var(--yellow-3);
@@ -1023,21 +1019,21 @@
   --color-yellow-10: var(--yellow-10);
   --color-yellow-11: var(--yellow-11);
   --color-yellow-12: var(--yellow-12);
+  --color-yellow-a1: var(--yellow-a1);
+  --color-yellow-a2: var(--yellow-a2);
+  --color-yellow-a3: var(--yellow-a3);
+  --color-yellow-a4: var(--yellow-a4);
+  --color-yellow-a5: var(--yellow-a5);
+  --color-yellow-a6: var(--yellow-a6);
+  --color-yellow-a7: var(--yellow-a7);
+  --color-yellow-a8: var(--yellow-a8);
+  --color-yellow-a9: var(--yellow-a9);
+  --color-yellow-a10: var(--yellow-a10);
+  --color-yellow-a11: var(--yellow-a11);
+  --color-yellow-a12: var(--yellow-a12);
+  --color-yellow-contrast: var(--yellow-contrast);
+  --color-yellow-surface: var(--yellow-surface);
 
-  --color-yellow-alpha-1: var(--yellow-alpha-1);
-  --color-yellow-alpha-2: var(--yellow-alpha-2);
-  --color-yellow-alpha-3: var(--yellow-alpha-3);
-  --color-yellow-alpha-4: var(--yellow-alpha-4);
-  --color-yellow-alpha-5: var(--yellow-alpha-5);
-  --color-yellow-alpha-6: var(--yellow-alpha-6);
-  --color-yellow-alpha-7: var(--yellow-alpha-7);
-  --color-yellow-alpha-8: var(--yellow-alpha-8);
-  --color-yellow-alpha-9: var(--yellow-alpha-9);
-  --color-yellow-alpha-10: var(--yellow-alpha-10);
-  --color-yellow-alpha-11: var(--yellow-alpha-11);
-  --color-yellow-alpha-12: var(--yellow-alpha-12);
-
-  --color-amber: var(--amber-9);
   --color-amber-1: var(--amber-1);
   --color-amber-2: var(--amber-2);
   --color-amber-3: var(--amber-3);
@@ -1050,21 +1046,21 @@
   --color-amber-10: var(--amber-10);
   --color-amber-11: var(--amber-11);
   --color-amber-12: var(--amber-12);
+  --color-amber-a1: var(--amber-a1);
+  --color-amber-a2: var(--amber-a2);
+  --color-amber-a3: var(--amber-a3);
+  --color-amber-a4: var(--amber-a4);
+  --color-amber-a5: var(--amber-a5);
+  --color-amber-a6: var(--amber-a6);
+  --color-amber-a7: var(--amber-a7);
+  --color-amber-a8: var(--amber-a8);
+  --color-amber-a9: var(--amber-a9);
+  --color-amber-a10: var(--amber-a10);
+  --color-amber-a11: var(--amber-a11);
+  --color-amber-a12: var(--amber-a12);
+  --color-amber-contrast: var(--amber-contrast);
+  --color-amber-surface: var(--amber-surface);
 
-  --color-amber-alpha-1: var(--amber-alpha-1);
-  --color-amber-alpha-2: var(--amber-alpha-2);
-  --color-amber-alpha-3: var(--amber-alpha-3);
-  --color-amber-alpha-4: var(--amber-alpha-4);
-  --color-amber-alpha-5: var(--amber-alpha-5);
-  --color-amber-alpha-6: var(--amber-alpha-6);
-  --color-amber-alpha-7: var(--amber-alpha-7);
-  --color-amber-alpha-8: var(--amber-alpha-8);
-  --color-amber-alpha-9: var(--amber-alpha-9);
-  --color-amber-alpha-10: var(--amber-alpha-10);
-  --color-amber-alpha-11: var(--amber-alpha-11);
-  --color-amber-alpha-12: var(--amber-alpha-12);
-
-  --color-orange: var(--orange-9);
   --color-orange-1: var(--orange-1);
   --color-orange-2: var(--orange-2);
   --color-orange-3: var(--orange-3);
@@ -1077,93 +1073,136 @@
   --color-orange-10: var(--orange-10);
   --color-orange-11: var(--orange-11);
   --color-orange-12: var(--orange-12);
+  --color-orange-a1: var(--orange-a1);
+  --color-orange-a2: var(--orange-a2);
+  --color-orange-a3: var(--orange-a3);
+  --color-orange-a4: var(--orange-a4);
+  --color-orange-a5: var(--orange-a5);
+  --color-orange-a6: var(--orange-a6);
+  --color-orange-a7: var(--orange-a7);
+  --color-orange-a8: var(--orange-a8);
+  --color-orange-a9: var(--orange-a9);
+  --color-orange-a10: var(--orange-a10);
+  --color-orange-a11: var(--orange-a11);
+  --color-orange-a12: var(--orange-a12);
+  --color-orange-contrast: var(--orange-contrast);
+  --color-orange-surface: var(--orange-surface);
+
+  /**
+   * Cores semânticas: só existem para um valor compartilhado por vários componentes que não é
+   * o mesmo passo de escala nos dois temas (o fundo do app é branco no claro e `gray-1` no
+   * escuro). O que é sempre o mesmo passo (`gray-6` na borda) usa o passo. Cada superfície (popup, painel, card) redefine `--ui-current-surface` para o seu fundo, e
+   * o que se apoia nela (um item em hover) lê `current-surface` sem saber onde está.
+   */
+  --color-background: var(--ui-background);
+  --color-panel: var(--ui-panel);
+  --color-current-surface: var(--ui-current-surface);
+  --color-overlay: var(--ui-overlay);
+  --color-focus-ring: var(--ui-focus-ring);
+}
 
-  --color-orange-alpha-1: var(--orange-alpha-1);
-  --color-orange-alpha-2: var(--orange-alpha-2);
-  --color-orange-alpha-3: var(--orange-alpha-3);
-  --color-orange-alpha-4: var(--orange-alpha-4);
-  --color-orange-alpha-5: var(--orange-alpha-5);
-  --color-orange-alpha-6: var(--orange-alpha-6);
-  --color-orange-alpha-7: var(--orange-alpha-7);
-  --color-orange-alpha-8: var(--orange-alpha-8);
-  --color-orange-alpha-9: var(--orange-alpha-9);
-  --color-orange-alpha-10: var(--orange-alpha-10);
-  --color-orange-alpha-11: var(--orange-alpha-11);
-  --color-orange-alpha-12: var(--orange-alpha-12);
+/**
+ * Valores iguais nos dois temas: o texto sobre o passo 9 de cada escala e as transparências
+ * de branco e preto. Ficam só no `:root`, e um container com `data-theme` herda daqui.
+ */
+:root {
+  --white-a1: rgba(255, 255, 255, 0.05);
+  --white-a2: rgba(255, 255, 255, 0.1);
+  --white-a3: rgba(255, 255, 255, 0.15);
+  --white-a4: rgba(255, 255, 255, 0.2);
+  --white-a5: rgba(255, 255, 255, 0.3);
+  --white-a6: rgba(255, 255, 255, 0.4);
+  --white-a7: rgba(255, 255, 255, 0.5);
+  --white-a8: rgba(255, 255, 255, 0.6);
+  --white-a9: rgba(255, 255, 255, 0.7);
+  --white-a10: rgba(255, 255, 255, 0.8);
+  --white-a11: rgba(255, 255, 255, 0.9);
+  --white-a12: rgba(255, 255, 255, 0.95);
+
+  --black-a1: rgba(0, 0, 0, 0.05);
+  --black-a2: rgba(0, 0, 0, 0.1);
+  --black-a3: rgba(0, 0, 0, 0.15);
+  --black-a4: rgba(0, 0, 0, 0.2);
+  --black-a5: rgba(0, 0, 0, 0.3);
+  --black-a6: rgba(0, 0, 0, 0.4);
+  --black-a7: rgba(0, 0, 0, 0.5);
+  --black-a8: rgba(0, 0, 0, 0.6);
+  --black-a9: rgba(0, 0, 0, 0.7);
+  --black-a10: rgba(0, 0, 0, 0.8);
+  --black-a11: rgba(0, 0, 0, 0.9);
+  --black-a12: rgba(0, 0, 0, 0.95);
+
+  --accent-contrast: #fff;
+  --gray-contrast: #fff;
+  --tomato-contrast: #fff;
+  --red-contrast: #fff;
+  --ruby-contrast: #fff;
+  --crimson-contrast: #fff;
+  --pink-contrast: #fff;
+  --plum-contrast: #fff;
+  --purple-contrast: #fff;
+  --violet-contrast: #fff;
+  --iris-contrast: #fff;
+  --indigo-contrast: #fff;
+  --blue-contrast: #fff;
+  --cyan-contrast: #fff;
+  --teal-contrast: #fff;
+  --jade-contrast: #fff;
+  --green-contrast: #fff;
+  --grass-contrast: #fff;
+  --brown-contrast: #fff;
+  --bronze-contrast: #fff;
+  --gold-contrast: #fff;
+  --sky-contrast: #1c2024;
+  --mint-contrast: #1a211e;
+  --lime-contrast: #1d211c;
+  --yellow-contrast: #21201c;
+  --amber-contrast: #21201c;
+  --orange-contrast: #fff;
 }
 
 /**
- * Tokens de cores para tema claro (padrão)
+ * Valores do tema claro, o padrão sem `data-theme`.
  *
- * Define o conjunto base de cores usado quando nenhum tema escuro está ativo.
+ * O claro e o escuro definem as mesmas variáveis, cada um com os seus valores. Qualquer passo
+ * pode mudar de um tema para o outro, inclusive o 9 do `accent` e das outras escalas: o que se
+ * mantém é o papel do passo, não a cor. Por isso o componente usa a classe do passo sem `dark:`,
+ * e a página ou um container troca de tema só pelo `data-theme`.
  *
- * Integração com Tailwind:
- * - As variáveis CSS definidas aqui são referenciadas no bloco @theme
- * - Utilities do Tailwind como bg-brand, text-gray-12, border-blue-6, etc.
- *   consomem essas variáveis em tempo de execução
- * - A propriedade color-scheme: light otimiza controles nativos do navegador
- *   (scrollbars, inputs, selects) para o modo claro
+ * O `color-scheme` de cada bloco faz a barra de rolagem, o autofill e os controles nativos
+ * seguirem o tema.
  */
 :root,
 :where([data-theme="light"]) {
   color-scheme: light;
 
-  --color-white: #ffffff;
-  --white-alpha-1: rgba(255, 255, 255, 0.05);
-  --white-alpha-2: rgba(255, 255, 255, 0.1);
-  --white-alpha-3: rgba(255, 255, 255, 0.15);
-  --white-alpha-4: rgba(255, 255, 255, 0.2);
-  --white-alpha-5: rgba(255, 255, 255, 0.3);
-  --white-alpha-6: rgba(255, 255, 255, 0.4);
-  --white-alpha-7: rgba(255, 255, 255, 0.5);
-  --white-alpha-8: rgba(255, 255, 255, 0.6);
-  --white-alpha-9: rgba(255, 255, 255, 0.7);
-  --white-alpha-10: rgba(255, 255, 255, 0.8);
-  --white-alpha-11: rgba(255, 255, 255, 0.9);
-  --white-alpha-12: rgba(255, 255, 255, 0.95);
-
-  --black: #000000;
-  --black-alpha-1: rgba(0, 0, 0, 0.05);
-  --black-alpha-2: rgba(0, 0, 0, 0.1);
-  --black-alpha-3: rgba(0, 0, 0, 0.15);
-  --black-alpha-4: rgba(0, 0, 0, 0.2);
-  --black-alpha-5: rgba(0, 0, 0, 0.3);
-  --black-alpha-6: rgba(0, 0, 0, 0.4);
-  --black-alpha-7: rgba(0, 0, 0, 0.5);
-  --black-alpha-8: rgba(0, 0, 0, 0.6);
-  --black-alpha-9: rgba(0, 0, 0, 0.7);
-  --black-alpha-10: rgba(0, 0, 0, 0.8);
-  --black-alpha-11: rgba(0, 0, 0, 0.9);
-  --black-alpha-12: rgba(0, 0, 0, 0.95);
-
-  --brand-1: #fdfdff;
-  --brand-2: #f8f8ff;
-  --brand-3: #f0f1fe;
-  --brand-4: #e6e7ff;
-  --brand-5: #dadcff;
-  --brand-6: #cbcdff;
-  --brand-7: #b8baf8;
-  --brand-8: #9b9ef0;
-  --brand-9: #5b5bd6;
-  --brand-10: #5151cd;
-  --brand-11: #5753c6;
-  --brand-12: #272962;
-
-  --brand-alpha-1: #0000ff02;
-  --brand-alpha-2: #0000ff07;
-  --brand-alpha-3: #0011ee0f;
-  --brand-alpha-4: #000bff19;
-  --brand-alpha-5: #000eff25;
-  --brand-alpha-6: #000aff34;
-  --brand-alpha-7: #0008e647;
-  --brand-alpha-8: #0008d964;
-  --brand-alpha-9: #0000c0a4;
-  --brand-alpha-10: #0000b6ae;
-  --brand-alpha-11: #0600abac;
-  --brand-alpha-12: #000246d8;
-
-  /* Paleta gray (light) original do Radix Colors */
-  /*
+  --accent-1: #fdfdff;
+  --accent-2: #f8f8ff;
+  --accent-3: #f0f1fe;
+  --accent-4: #e6e7ff;
+  --accent-5: #dadcff;
+  --accent-6: #cbcdff;
+  --accent-7: #b8baf8;
+  --accent-8: #9b9ef0;
+  --accent-9: #5b5bd6;
+  --accent-10: #5151cd;
+  --accent-11: #5753c6;
+  --accent-12: #272962;
+  --accent-a1: #0000ff02;
+  --accent-a2: #0000ff07;
+  --accent-a3: #0011ee0f;
+  --accent-a4: #000bff19;
+  --accent-a5: #000eff25;
+  --accent-a6: #000aff34;
+  --accent-a7: #0008e647;
+  --accent-a8: #0008d964;
+  --accent-a9: #0000c0a4;
+  --accent-a10: #0000b6ae;
+  --accent-a11: #0600abac;
+  --accent-a12: #000246d8;
+  --accent-surface: #f6f6ffcc;
+
+  /* Paleta gray (light) do Radix Colors, a mesma base das escalas alpha abaixo */
   --gray-1: #fcfcfc;
   --gray-2: #f9f9f9;
   --gray-3: #f0f0f0;
@@ -1176,10 +1215,25 @@
   --gray-10: #838383;
   --gray-11: #646464;
   --gray-12: #202020;
-  */
-
-  /* Paleta gray (light) personalizada para melhor contraste e legibilidade */
-  --gray: #8c8c8c;
+  --gray-a1: #00000003;
+  --gray-a2: #00000006;
+  --gray-a3: #0000000f;
+  --gray-a4: #00000017;
+  --gray-a5: #0000001f;
+  --gray-a6: #00000026;
+  --gray-a7: #00000031;
+  --gray-a8: #00000044;
+  --gray-a9: #00000072;
+  --gray-a10: #0000007c;
+  --gray-a11: #0000009b;
+  --gray-a12: #000000df;
+  --gray-surface: #ffffffcc;
+  /**
+   * Alternativa personalizada: os passos 1 a 8 um pouco mais escuros, para mais contraste entre
+   * o fundo e as bordas. Ela não tem escala alpha correspondente: um sólido e o alpha do mesmo
+   * passo deixam de dar a mesma cor sobre o fundo da página.
+   */
+  /*
   --gray-1: #fafafa;
   --gray-2: #f5f5f5;
   --gray-3: #ebebeb;
@@ -1192,19 +1246,7 @@
   --gray-10: #838383;
   --gray-11: #646464;
   --gray-12: #202020;
-
-  --gray-alpha-1: #00000003;
-  --gray-alpha-2: #00000006;
-  --gray-alpha-3: #0000000f;
-  --gray-alpha-4: #00000017;
-  --gray-alpha-5: #0000001f;
-  --gray-alpha-6: #00000026;
-  --gray-alpha-7: #00000031;
-  --gray-alpha-8: #00000044;
-  --gray-alpha-9: #00000072;
-  --gray-alpha-10: #0000007c;
-  --gray-alpha-11: #0000009b;
-  --gray-alpha-12: #000000df;
+  */
 
   --tomato-1: #fffcfc;
   --tomato-2: #fff8f7;
@@ -1218,19 +1260,19 @@
   --tomato-10: #dd4425;
   --tomato-11: #d13415;
   --tomato-12: #5c271f;
-
-  --tomato-alpha-1: #ff000003;
-  --tomato-alpha-2: #ff200008;
-  --tomato-alpha-3: #f52b0018;
-  --tomato-alpha-4: #ff35002c;
-  --tomato-alpha-5: #ff2e003d;
-  --tomato-alpha-6: #f92d0050;
-  --tomato-alpha-7: #e7280067;
-  --tomato-alpha-8: #db250084;
-  --tomato-alpha-9: #df2600d1;
-  --tomato-alpha-10: #d72400da;
-  --tomato-alpha-11: #cd2200ea;
-  --tomato-alpha-12: #460900e0;
+  --tomato-a1: #ff000003;
+  --tomato-a2: #ff200008;
+  --tomato-a3: #f52b0018;
+  --tomato-a4: #ff35002c;
+  --tomato-a5: #ff2e003d;
+  --tomato-a6: #f92d0050;
+  --tomato-a7: #e7280067;
+  --tomato-a8: #db250084;
+  --tomato-a9: #df2600d1;
+  --tomato-a10: #d72400da;
+  --tomato-a11: #cd2200ea;
+  --tomato-a12: #460900e0;
+  --tomato-surface: #fff6f5cc;
 
   --red-1: #fffcfc;
   --red-2: #fff7f7;
@@ -1244,19 +1286,19 @@
   --red-10: #dc3e42;
   --red-11: #ce2c31;
   --red-12: #641723;
-
-  --red-alpha-1: #ff000003;
-  --red-alpha-2: #ff000008;
-  --red-alpha-3: #f3000d14;
-  --red-alpha-4: #ff000824;
-  --red-alpha-5: #ff000632;
-  --red-alpha-6: #f8000442;
-  --red-alpha-7: #df000356;
-  --red-alpha-8: #d2000571;
-  --red-alpha-9: #db0007b7;
-  --red-alpha-10: #d10005c1;
-  --red-alpha-11: #c40006d3;
-  --red-alpha-12: #55000de8;
+  --red-a1: #ff000003;
+  --red-a2: #ff000008;
+  --red-a3: #f3000d14;
+  --red-a4: #ff000824;
+  --red-a5: #ff000632;
+  --red-a6: #f8000442;
+  --red-a7: #df000356;
+  --red-a8: #d2000571;
+  --red-a9: #db0007b7;
+  --red-a10: #d10005c1;
+  --red-a11: #c40006d3;
+  --red-a12: #55000de8;
+  --red-surface: #fff5f5cc;
 
   --ruby-1: #fffcfd;
   --ruby-2: #fff7f8;
@@ -1270,19 +1312,19 @@
   --ruby-10: #dc3b5d;
   --ruby-11: #ca244d;
   --ruby-12: #64172b;
-
-  --ruby-alpha-1: #ff005503;
-  --ruby-alpha-2: #ff002008;
-  --ruby-alpha-3: #f3002515;
-  --ruby-alpha-4: #ff002523;
-  --ruby-alpha-5: #ff002a31;
-  --ruby-alpha-6: #e4002440;
-  --ruby-alpha-7: #ce002553;
-  --ruby-alpha-8: #c300286d;
-  --ruby-alpha-9: #db002cb9;
-  --ruby-alpha-10: #d2002cc4;
-  --ruby-alpha-11: #c10030db;
-  --ruby-alpha-12: #550016e8;
+  --ruby-a1: #ff005503;
+  --ruby-a2: #ff002008;
+  --ruby-a3: #f3002515;
+  --ruby-a4: #ff002523;
+  --ruby-a5: #ff002a31;
+  --ruby-a6: #e4002440;
+  --ruby-a7: #ce002553;
+  --ruby-a8: #c300286d;
+  --ruby-a9: #db002cb9;
+  --ruby-a10: #d2002cc4;
+  --ruby-a11: #c10030db;
+  --ruby-a12: #550016e8;
+  --ruby-surface: #fff5f6cc;
 
   --crimson-1: #fffcfd;
   --crimson-2: #fef7f9;
@@ -1296,19 +1338,19 @@
   --crimson-10: #df3478;
   --crimson-11: #cb1d63;
   --crimson-12: #621639;
-
-  --crimson-alpha-1: #ff005503;
-  --crimson-alpha-2: #e0004008;
-  --crimson-alpha-3: #ff005216;
-  --crimson-alpha-4: #f8005123;
-  --crimson-alpha-5: #e5004f31;
-  --crimson-alpha-6: #d0004b41;
-  --crimson-alpha-7: #bf004753;
-  --crimson-alpha-8: #b6004a6c;
-  --crimson-alpha-9: #e2005bc2;
-  --crimson-alpha-10: #d70056cb;
-  --crimson-alpha-11: #c4004fe2;
-  --crimson-alpha-12: #530026e9;
+  --crimson-a1: #ff005503;
+  --crimson-a2: #e0004008;
+  --crimson-a3: #ff005216;
+  --crimson-a4: #f8005123;
+  --crimson-a5: #e5004f31;
+  --crimson-a6: #d0004b41;
+  --crimson-a7: #bf004753;
+  --crimson-a8: #b6004a6c;
+  --crimson-a9: #e2005bc2;
+  --crimson-a10: #d70056cb;
+  --crimson-a11: #c4004fe2;
+  --crimson-a12: #530026e9;
+  --crimson-surface: #fef5f8cc;
 
   --pink-1: #fffcfe;
   --pink-2: #fef7fb;
@@ -1322,19 +1364,19 @@
   --pink-10: #cf3897;
   --pink-11: #c2298a;
   --pink-12: #651249;
-
-  --pink-alpha-1: #ff00aa03;
-  --pink-alpha-2: #e0008008;
-  --pink-alpha-3: #f4008c16;
-  --pink-alpha-4: #e2008b23;
-  --pink-alpha-5: #d1008331;
-  --pink-alpha-6: #c0007840;
-  --pink-alpha-7: #b6006f53;
-  --pink-alpha-8: #af006f6c;
-  --pink-alpha-9: #c8007fbf;
-  --pink-alpha-10: #c2007ac7;
-  --pink-alpha-11: #b60074d6;
-  --pink-alpha-12: #59003bed;
+  --pink-a1: #ff00aa03;
+  --pink-a2: #e0008008;
+  --pink-a3: #f4008c16;
+  --pink-a4: #e2008b23;
+  --pink-a5: #d1008331;
+  --pink-a6: #c0007840;
+  --pink-a7: #b6006f53;
+  --pink-a8: #af006f6c;
+  --pink-a9: #c8007fbf;
+  --pink-a10: #c2007ac7;
+  --pink-a11: #b60074d6;
+  --pink-a12: #59003bed;
+  --pink-surface: #fef5facc;
 
   --plum-1: #fefcff;
   --plum-2: #fdf7fd;
@@ -1348,19 +1390,19 @@
   --plum-10: #a144af;
   --plum-11: #953ea3;
   --plum-12: #53195d;
-
-  --plum-alpha-1: #aa00ff03;
-  --plum-alpha-2: #c000c008;
-  --plum-alpha-3: #cc00cc14;
-  --plum-alpha-4: #c200c921;
-  --plum-alpha-5: #b700bd2e;
-  --plum-alpha-6: #a400b03d;
-  --plum-alpha-7: #9900a852;
-  --plum-alpha-8: #9000a56e;
-  --plum-alpha-9: #89009eb5;
-  --plum-alpha-10: #7f0092bb;
-  --plum-alpha-11: #730086c1;
-  --plum-alpha-12: #40004be6;
+  --plum-a1: #aa00ff03;
+  --plum-a2: #c000c008;
+  --plum-a3: #cc00cc14;
+  --plum-a4: #c200c921;
+  --plum-a5: #b700bd2e;
+  --plum-a6: #a400b03d;
+  --plum-a7: #9900a852;
+  --plum-a8: #9000a56e;
+  --plum-a9: #89009eb5;
+  --plum-a10: #7f0092bb;
+  --plum-a11: #730086c1;
+  --plum-a12: #40004be6;
+  --plum-surface: #fdf5fdcc;
 
   --purple-1: #fefcfe;
   --purple-2: #fbf7fe;
@@ -1374,19 +1416,19 @@
   --purple-10: #8347b9;
   --purple-11: #8145b5;
   --purple-12: #402060;
-
-  --purple-alpha-1: #aa00aa03;
-  --purple-alpha-2: #8000e008;
-  --purple-alpha-3: #8e00f112;
-  --purple-alpha-4: #8d00e51d;
-  --purple-alpha-5: #8000db2a;
-  --purple-alpha-6: #7a01d03b;
-  --purple-alpha-7: #6d00c350;
-  --purple-alpha-8: #6600c06c;
-  --purple-alpha-9: #5c00adb1;
-  --purple-alpha-10: #53009eb8;
-  --purple-alpha-11: #52009aba;
-  --purple-alpha-12: #250049df;
+  --purple-a1: #aa00aa03;
+  --purple-a2: #8000e008;
+  --purple-a3: #8e00f112;
+  --purple-a4: #8d00e51d;
+  --purple-a5: #8000db2a;
+  --purple-a6: #7a01d03b;
+  --purple-a7: #6d00c350;
+  --purple-a8: #6600c06c;
+  --purple-a9: #5c00adb1;
+  --purple-a10: #53009eb8;
+  --purple-a11: #52009aba;
+  --purple-a12: #250049df;
+  --purple-surface: #faf5fecc;
 
   --violet-1: #fdfcfe;
   --violet-2: #faf8ff;
@@ -1400,19 +1442,19 @@
   --violet-10: #654dc4;
   --violet-11: #6550b9;
   --violet-12: #2f265f;
-
-  --violet-alpha-1: #5500aa03;
-  --violet-alpha-2: #4900ff07;
-  --violet-alpha-3: #4400ee0f;
-  --violet-alpha-4: #4300ff1b;
-  --violet-alpha-5: #3600ff26;
-  --violet-alpha-6: #3100fb35;
-  --violet-alpha-7: #2d01dd4a;
-  --violet-alpha-8: #2b00d066;
-  --violet-alpha-9: #2400b7a9;
-  --violet-alpha-10: #2300abb2;
-  --violet-alpha-11: #1f0099af;
-  --violet-alpha-12: #0b0043d9;
+  --violet-a1: #5500aa03;
+  --violet-a2: #4900ff07;
+  --violet-a3: #4400ee0f;
+  --violet-a4: #4300ff1b;
+  --violet-a5: #3600ff26;
+  --violet-a6: #3100fb35;
+  --violet-a7: #2d01dd4a;
+  --violet-a8: #2b00d066;
+  --violet-a9: #2400b7a9;
+  --violet-a10: #2300abb2;
+  --violet-a11: #1f0099af;
+  --violet-a12: #0b0043d9;
+  --violet-surface: #f9f6ffcc;
 
   --iris-1: #fdfdff;
   --iris-2: #f8f8ff;
@@ -1426,19 +1468,19 @@
   --iris-10: #5151cd;
   --iris-11: #5753c6;
   --iris-12: #272962;
-
-  --iris-alpha-1: #0000ff02;
-  --iris-alpha-2: #0000ff07;
-  --iris-alpha-3: #0011ee0f;
-  --iris-alpha-4: #000bff19;
-  --iris-alpha-5: #000eff25;
-  --iris-alpha-6: #000aff34;
-  --iris-alpha-7: #0008e647;
-  --iris-alpha-8: #0008d964;
-  --iris-alpha-9: #0000c0a4;
-  --iris-alpha-10: #0000b6ae;
-  --iris-alpha-11: #0600abac;
-  --iris-alpha-12: #000246d8;
+  --iris-a1: #0000ff02;
+  --iris-a2: #0000ff07;
+  --iris-a3: #0011ee0f;
+  --iris-a4: #000bff19;
+  --iris-a5: #000eff25;
+  --iris-a6: #000aff34;
+  --iris-a7: #0008e647;
+  --iris-a8: #0008d964;
+  --iris-a9: #0000c0a4;
+  --iris-a10: #0000b6ae;
+  --iris-a11: #0600abac;
+  --iris-a12: #000246d8;
+  --iris-surface: #f6f6ffcc;
 
   --indigo-1: #fdfdfe;
   --indigo-2: #f7f9ff;
@@ -1452,19 +1494,19 @@
   --indigo-10: #3358d4;
   --indigo-11: #3a5bc7;
   --indigo-12: #1f2d5c;
-
-  --indigo-alpha-1: #00008002;
-  --indigo-alpha-2: #0040ff08;
-  --indigo-alpha-3: #0047f112;
-  --indigo-alpha-4: #0044ff1e;
-  --indigo-alpha-5: #0044ff2d;
-  --indigo-alpha-6: #003eff3e;
-  --indigo-alpha-7: #0037ed54;
-  --indigo-alpha-8: #0034dc72;
-  --indigo-alpha-9: #0031d2c1;
-  --indigo-alpha-10: #002ec9cc;
-  --indigo-alpha-11: #002bb7c5;
-  --indigo-alpha-12: #001046e0;
+  --indigo-a1: #00008002;
+  --indigo-a2: #0040ff08;
+  --indigo-a3: #0047f112;
+  --indigo-a4: #0044ff1e;
+  --indigo-a5: #0044ff2d;
+  --indigo-a6: #003eff3e;
+  --indigo-a7: #0037ed54;
+  --indigo-a8: #0034dc72;
+  --indigo-a9: #0031d2c1;
+  --indigo-a10: #002ec9cc;
+  --indigo-a11: #002bb7c5;
+  --indigo-a12: #001046e0;
+  --indigo-surface: #f5f8ffcc;
 
   --blue-1: #fbfdff;
   --blue-2: #f4faff;
@@ -1478,19 +1520,19 @@
   --blue-10: #0588f0;
   --blue-11: #0d74ce;
   --blue-12: #113264;
-
-  --blue-alpha-1: #0080ff04;
-  --blue-alpha-2: #008cff0b;
-  --blue-alpha-3: #008ff519;
-  --blue-alpha-4: #009eff2a;
-  --blue-alpha-5: #0093ff3d;
-  --blue-alpha-6: #0088f653;
-  --blue-alpha-7: #0083eb71;
-  --blue-alpha-8: #0084e6a1;
-  --blue-alpha-9: #0090ff;
-  --blue-alpha-10: #0086f0fa;
-  --blue-alpha-11: #006dcbf2;
-  --blue-alpha-12: #002359ee;
+  --blue-a1: #0080ff04;
+  --blue-a2: #008cff0b;
+  --blue-a3: #008ff519;
+  --blue-a4: #009eff2a;
+  --blue-a5: #0093ff3d;
+  --blue-a6: #0088f653;
+  --blue-a7: #0083eb71;
+  --blue-a8: #0084e6a1;
+  --blue-a9: #0090ff;
+  --blue-a10: #0086f0fa;
+  --blue-a11: #006dcbf2;
+  --blue-a12: #002359ee;
+  --blue-surface: #f1f9ffcc;
 
   --cyan-1: #fafdfe;
   --cyan-2: #f2fafb;
@@ -1504,19 +1546,19 @@
   --cyan-10: #0797b9;
   --cyan-11: #107d98;
   --cyan-12: #0d3c48;
-
-  --cyan-alpha-1: #0099cc05;
-  --cyan-alpha-2: #009db10d;
-  --cyan-alpha-3: #00c2d121;
-  --cyan-alpha-4: #00bcd435;
-  --cyan-alpha-5: #01b4cc4a;
-  --cyan-alpha-6: #00a7c162;
-  --cyan-alpha-7: #009fbb82;
-  --cyan-alpha-8: #00a3c0c2;
-  --cyan-alpha-9: #00a2c7;
-  --cyan-alpha-10: #0094b7f8;
-  --cyan-alpha-11: #007491ef;
-  --cyan-alpha-12: #00323ef2;
+  --cyan-a1: #0099cc05;
+  --cyan-a2: #009db10d;
+  --cyan-a3: #00c2d121;
+  --cyan-a4: #00bcd435;
+  --cyan-a5: #01b4cc4a;
+  --cyan-a6: #00a7c162;
+  --cyan-a7: #009fbb82;
+  --cyan-a8: #00a3c0c2;
+  --cyan-a9: #00a2c7;
+  --cyan-a10: #0094b7f8;
+  --cyan-a11: #007491ef;
+  --cyan-a12: #00323ef2;
+  --cyan-surface: #eff9facc;
 
   --teal-1: #fafefd;
   --teal-2: #f3fbf9;
@@ -1530,19 +1572,19 @@
   --teal-10: #0d9b8a;
   --teal-11: #008573;
   --teal-12: #0d3d38;
-
-  --teal-alpha-1: #00cc9905;
-  --teal-alpha-2: #00aa800c;
-  --teal-alpha-3: #00c69d1f;
-  --teal-alpha-4: #00c39633;
-  --teal-alpha-5: #00b49047;
-  --teal-alpha-6: #00a6855e;
-  --teal-alpha-7: #0099807c;
-  --teal-alpha-8: #009783ac;
-  --teal-alpha-9: #009e8ced;
-  --teal-alpha-10: #009684f2;
-  --teal-alpha-11: #008573;
-  --teal-alpha-12: #00332df2;
+  --teal-a1: #00cc9905;
+  --teal-a2: #00aa800c;
+  --teal-a3: #00c69d1f;
+  --teal-a4: #00c39633;
+  --teal-a5: #00b49047;
+  --teal-a6: #00a6855e;
+  --teal-a7: #0099807c;
+  --teal-a8: #009783ac;
+  --teal-a9: #009e8ced;
+  --teal-a10: #009684f2;
+  --teal-a11: #008573;
+  --teal-a12: #00332df2;
+  --teal-surface: #f0faf8cc;
 
   --jade-1: #fbfefd;
   --jade-2: #f4fbf7;
@@ -1556,19 +1598,19 @@
   --jade-10: #26997b;
   --jade-11: #208368;
   --jade-12: #1d3b31;
-
-  --jade-alpha-1: #00c08004;
-  --jade-alpha-2: #00a3460b;
-  --jade-alpha-3: #00ae4819;
-  --jade-alpha-4: #00a85129;
-  --jade-alpha-5: #00a2553c;
-  --jade-alpha-6: #009a5753;
-  --jade-alpha-7: #00945f74;
-  --jade-alpha-8: #00976ea9;
-  --jade-alpha-9: #00916bd6;
-  --jade-alpha-10: #008764d9;
-  --jade-alpha-11: #007152df;
-  --jade-alpha-12: #002217e2;
+  --jade-a1: #00c08004;
+  --jade-a2: #00a3460b;
+  --jade-a3: #00ae4819;
+  --jade-a4: #00a85129;
+  --jade-a5: #00a2553c;
+  --jade-a6: #009a5753;
+  --jade-a7: #00945f74;
+  --jade-a8: #00976ea9;
+  --jade-a9: #00916bd6;
+  --jade-a10: #008764d9;
+  --jade-a11: #007152df;
+  --jade-a12: #002217e2;
+  --jade-surface: #f1faf5cc;
 
   --green-1: #fbfefc;
   --green-2: #f4fbf6;
@@ -1582,19 +1624,19 @@
   --green-10: #2b9a66;
   --green-11: #218358;
   --green-12: #193b2d;
-
-  --green-alpha-1: #00c04004;
-  --green-alpha-2: #00a32f0b;
-  --green-alpha-3: #00a43319;
-  --green-alpha-4: #00a83829;
-  --green-alpha-5: #019c393b;
-  --green-alpha-6: #00963c52;
-  --green-alpha-7: #00914071;
-  --green-alpha-8: #00924ba4;
-  --green-alpha-9: #008f4acf;
-  --green-alpha-10: #008647d4;
-  --green-alpha-11: #00713fde;
-  --green-alpha-12: #002616e6;
+  --green-a1: #00c04004;
+  --green-a2: #00a32f0b;
+  --green-a3: #00a43319;
+  --green-a4: #00a83829;
+  --green-a5: #019c393b;
+  --green-a6: #00963c52;
+  --green-a7: #00914071;
+  --green-a8: #00924ba4;
+  --green-a9: #008f4acf;
+  --green-a10: #008647d4;
+  --green-a11: #00713fde;
+  --green-a12: #002616e6;
+  --green-surface: #f1faf4cc;
 
   --grass-1: #fbfefb;
   --grass-2: #f5fbf5;
@@ -1608,19 +1650,19 @@
   --grass-10: #3e9b4f;
   --grass-11: #2a7e3b;
   --grass-12: #203c25;
-
-  --grass-alpha-1: #00c00004;
-  --grass-alpha-2: #0099000a;
-  --grass-alpha-3: #00970016;
-  --grass-alpha-4: #009f0725;
-  --grass-alpha-5: #00930536;
-  --grass-alpha-6: #008f0a4d;
-  --grass-alpha-7: #018b0f6b;
-  --grass-alpha-8: #008d199a;
-  --grass-alpha-9: #008619b9;
-  --grass-alpha-10: #007b17c1;
-  --grass-alpha-11: #006514d5;
-  --grass-alpha-12: #002006df;
+  --grass-a1: #00c00004;
+  --grass-a2: #0099000a;
+  --grass-a3: #00970016;
+  --grass-a4: #009f0725;
+  --grass-a5: #00930536;
+  --grass-a6: #008f0a4d;
+  --grass-a7: #018b0f6b;
+  --grass-a8: #008d199a;
+  --grass-a9: #008619b9;
+  --grass-a10: #007b17c1;
+  --grass-a11: #006514d5;
+  --grass-a12: #002006df;
+  --grass-surface: #f3faf3cc;
 
   --brown-1: #fefdfc;
   --brown-2: #fcf9f6;
@@ -1634,19 +1676,19 @@
   --brown-10: #a07553;
   --brown-11: #815e46;
   --brown-12: #3e332e;
-
-  --brown-alpha-1: #aa550003;
-  --brown-alpha-2: #aa550009;
-  --brown-alpha-3: #a04b0018;
-  --brown-alpha-4: #9b4a0026;
-  --brown-alpha-5: #9f4d0035;
-  --brown-alpha-6: #a04e0048;
-  --brown-alpha-7: #a34e0060;
-  --brown-alpha-8: #9f4a0081;
-  --brown-alpha-9: #823c00a7;
-  --brown-alpha-10: #723300ac;
-  --brown-alpha-11: #522100b9;
-  --brown-alpha-12: #140600d1;
+  --brown-a1: #aa550003;
+  --brown-a2: #aa550009;
+  --brown-a3: #a04b0018;
+  --brown-a4: #9b4a0026;
+  --brown-a5: #9f4d0035;
+  --brown-a6: #a04e0048;
+  --brown-a7: #a34e0060;
+  --brown-a8: #9f4a0081;
+  --brown-a9: #823c00a7;
+  --brown-a10: #723300ac;
+  --brown-a11: #522100b9;
+  --brown-a12: #140600d1;
+  --brown-surface: #fbf8f4cc;
 
   --bronze-1: #fdfcfc;
   --bronze-2: #fdf7f5;
@@ -1660,19 +1702,19 @@
   --bronze-10: #957468;
   --bronze-11: #7d5e54;
   --bronze-12: #43302b;
-
-  --bronze-alpha-1: #55000003;
-  --bronze-alpha-2: #cc33000a;
-  --bronze-alpha-3: #92250015;
-  --bronze-alpha-4: #80280020;
-  --bronze-alpha-5: #7423002c;
-  --bronze-alpha-6: #7324003a;
-  --bronze-alpha-7: #6c1f004c;
-  --bronze-alpha-8: #671c0066;
-  --bronze-alpha-9: #551a008d;
-  --bronze-alpha-10: #4c150097;
-  --bronze-alpha-11: #3d0f00ab;
-  --bronze-alpha-12: #1d0600d4;
+  --bronze-a1: #55000003;
+  --bronze-a2: #cc33000a;
+  --bronze-a3: #92250015;
+  --bronze-a4: #80280020;
+  --bronze-a5: #7423002c;
+  --bronze-a6: #7324003a;
+  --bronze-a7: #6c1f004c;
+  --bronze-a8: #671c0066;
+  --bronze-a9: #551a008d;
+  --bronze-a10: #4c150097;
+  --bronze-a11: #3d0f00ab;
+  --bronze-a12: #1d0600d4;
+  --bronze-surface: #fdf5f3cc;
 
   --gold-1: #fdfdfc;
   --gold-2: #faf9f2;
@@ -1686,19 +1728,19 @@
   --gold-10: #8c7a5e;
   --gold-11: #71624b;
   --gold-12: #3b352b;
-
-  --gold-alpha-1: #55550003;
-  --gold-alpha-2: #9d8a000d;
-  --gold-alpha-3: #75600018;
-  --gold-alpha-4: #6b4e0024;
-  --gold-alpha-5: #60460030;
-  --gold-alpha-6: #64440040;
-  --gold-alpha-7: #63420055;
-  --gold-alpha-8: #633d0072;
-  --gold-alpha-9: #5332009a;
-  --gold-alpha-10: #492d00a1;
-  --gold-alpha-11: #362100b4;
-  --gold-alpha-12: #130c00d4;
+  --gold-a1: #55550003;
+  --gold-a2: #9d8a000d;
+  --gold-a3: #75600018;
+  --gold-a4: #6b4e0024;
+  --gold-a5: #60460030;
+  --gold-a6: #64440040;
+  --gold-a7: #63420055;
+  --gold-a8: #633d0072;
+  --gold-a9: #5332009a;
+  --gold-a10: #492d00a1;
+  --gold-a11: #362100b4;
+  --gold-a12: #130c00d4;
+  --gold-surface: #f9f8efcc;
 
   --sky-1: #f9feff;
   --sky-2: #f1fafd;
@@ -1712,19 +1754,19 @@
   --sky-10: #74daf8;
   --sky-11: #00749e;
   --sky-12: #1d3e56;
-
-  --sky-alpha-1: #00d5ff06;
-  --sky-alpha-2: #00a4db0e;
-  --sky-alpha-3: #00b3ee1e;
-  --sky-alpha-4: #00ace42e;
-  --sky-alpha-5: #00a1d841;
-  --sky-alpha-6: #0092ca56;
-  --sky-alpha-7: #0089c172;
-  --sky-alpha-8: #0085bf9f;
-  --sky-alpha-9: #00c7fe83;
-  --sky-alpha-10: #00bcf38b;
-  --sky-alpha-11: #00749e;
-  --sky-alpha-12: #002540e2;
+  --sky-a1: #00d5ff06;
+  --sky-a2: #00a4db0e;
+  --sky-a3: #00b3ee1e;
+  --sky-a4: #00ace42e;
+  --sky-a5: #00a1d841;
+  --sky-a6: #0092ca56;
+  --sky-a7: #0089c172;
+  --sky-a8: #0085bf9f;
+  --sky-a9: #00c7fe83;
+  --sky-a10: #00bcf38b;
+  --sky-a11: #00749e;
+  --sky-a12: #002540e2;
+  --sky-surface: #eef9fdcc;
 
   --mint-1: #f9fefd;
   --mint-2: #f2fbf9;
@@ -1738,19 +1780,19 @@
   --mint-10: #7de0cb;
   --mint-11: #027864;
   --mint-12: #16433c;
-
-  --mint-alpha-1: #00d5aa06;
-  --mint-alpha-2: #00b18a0d;
-  --mint-alpha-3: #00d29e22;
-  --mint-alpha-4: #00cc9937;
-  --mint-alpha-5: #00c0914c;
-  --mint-alpha-6: #00b08663;
-  --mint-alpha-7: #00a17d81;
-  --mint-alpha-8: #009e7fb3;
-  --mint-alpha-9: #00d3a579;
-  --mint-alpha-10: #00c39982;
-  --mint-alpha-11: #007763fd;
-  --mint-alpha-12: #00312ae9;
+  --mint-a1: #00d5aa06;
+  --mint-a2: #00b18a0d;
+  --mint-a3: #00d29e22;
+  --mint-a4: #00cc9937;
+  --mint-a5: #00c0914c;
+  --mint-a6: #00b08663;
+  --mint-a7: #00a17d81;
+  --mint-a8: #009e7fb3;
+  --mint-a9: #00d3a579;
+  --mint-a10: #00c39982;
+  --mint-a11: #007763fd;
+  --mint-a12: #00312ae9;
+  --mint-surface: #effaf8cc;
 
   --lime-1: #fcfdfa;
   --lime-2: #f8faf3;
@@ -1764,19 +1806,19 @@
   --lime-10: #b0e64c;
   --lime-11: #5c7c2f;
   --lime-12: #37401c;
-
-  --lime-alpha-1: #66990005;
-  --lime-alpha-2: #6b95000c;
-  --lime-alpha-3: #96c80029;
-  --lime-alpha-4: #8fc60042;
-  --lime-alpha-5: #81bb0059;
-  --lime-alpha-6: #72aa006e;
-  --lime-alpha-7: #61990087;
-  --lime-alpha-8: #559200ab;
-  --lime-alpha-9: #93e4009c;
-  --lime-alpha-10: #8fdc00b3;
-  --lime-alpha-11: #375f00d0;
-  --lime-alpha-12: #1e2900e3;
+  --lime-a1: #66990005;
+  --lime-a2: #6b95000c;
+  --lime-a3: #96c80029;
+  --lime-a4: #8fc60042;
+  --lime-a5: #81bb0059;
+  --lime-a6: #72aa006e;
+  --lime-a7: #61990087;
+  --lime-a8: #559200ab;
+  --lime-a9: #93e4009c;
+  --lime-a10: #8fdc00b3;
+  --lime-a11: #375f00d0;
+  --lime-a12: #1e2900e3;
+  --lime-surface: #f6f9f0cc;
 
   --yellow-1: #fdfdf9;
   --yellow-2: #fefce9;
@@ -1790,19 +1832,19 @@
   --yellow-10: #ffdc00;
   --yellow-11: #9e6c00;
   --yellow-12: #473b1f;
-
-  --yellow-alpha-1: #aaaa0006;
-  --yellow-alpha-2: #f4dd0016;
-  --yellow-alpha-3: #ffee0047;
-  --yellow-alpha-4: #ffe3016b;
-  --yellow-alpha-5: #ffd5008f;
-  --yellow-alpha-6: #ebbc0097;
-  --yellow-alpha-7: #d2a10098;
-  --yellow-alpha-8: #c99700c6;
-  --yellow-alpha-9: #ffe100d6;
-  --yellow-alpha-10: #ffdc00;
-  --yellow-alpha-11: #9e6c00;
-  --yellow-alpha-12: #2e2000e0;
+  --yellow-a1: #aaaa0006;
+  --yellow-a2: #f4dd0016;
+  --yellow-a3: #ffee0047;
+  --yellow-a4: #ffe3016b;
+  --yellow-a5: #ffd5008f;
+  --yellow-a6: #ebbc0097;
+  --yellow-a7: #d2a10098;
+  --yellow-a8: #c99700c6;
+  --yellow-a9: #ffe100d6;
+  --yellow-a10: #ffdc00;
+  --yellow-a11: #9e6c00;
+  --yellow-a12: #2e2000e0;
+  --yellow-surface: #fefbe4cc;
 
   --amber-1: #fefdfb;
   --amber-2: #fefbe9;
@@ -1816,19 +1858,19 @@
   --amber-10: #ffba18;
   --amber-11: #ab6400;
   --amber-12: #4f3422;
-
-  --amber-alpha-1: #c0800004;
-  --amber-alpha-2: #f4d10016;
-  --amber-alpha-3: #ffde003d;
-  --amber-alpha-4: #ffd40063;
-  --amber-alpha-5: #f8cf0088;
-  --amber-alpha-6: #eab5008c;
-  --amber-alpha-7: #dc9b009d;
-  --amber-alpha-8: #da8a00c9;
-  --amber-alpha-9: #ffb300c2;
-  --amber-alpha-10: #ffb300e7;
-  --amber-alpha-11: #ab6400;
-  --amber-alpha-12: #341500dd;
+  --amber-a1: #c0800004;
+  --amber-a2: #f4d10016;
+  --amber-a3: #ffde003d;
+  --amber-a4: #ffd40063;
+  --amber-a5: #f8cf0088;
+  --amber-a6: #eab5008c;
+  --amber-a7: #dc9b009d;
+  --amber-a8: #da8a00c9;
+  --amber-a9: #ffb300c2;
+  --amber-a10: #ffb300e7;
+  --amber-a11: #ab6400;
+  --amber-a12: #341500dd;
+  --amber-surface: #fefae4cc;
 
   --orange-1: #fefcfb;
   --orange-2: #fff7ed;
@@ -1842,71 +1884,62 @@
   --orange-10: #ef5f00;
   --orange-11: #cc4e00;
   --orange-12: #582d1d;
-
-  --orange-alpha-1: #c0400004;
-  --orange-alpha-2: #ff8e0012;
-  --orange-alpha-3: #ff9c0029;
-  --orange-alpha-4: #ff91014a;
-  --orange-alpha-5: #ff8b0065;
-  --orange-alpha-6: #ff81007d;
-  --orange-alpha-7: #ed6c008c;
-  --orange-alpha-8: #e35f00aa;
-  --orange-alpha-9: #f65e00ea;
-  --orange-alpha-10: #ef5f00;
-  --orange-alpha-11: #cc4e00;
-  --orange-alpha-12: #431200e2;
+  --orange-a1: #c0400004;
+  --orange-a2: #ff8e0012;
+  --orange-a3: #ff9c0029;
+  --orange-a4: #ff91014a;
+  --orange-a5: #ff8b0065;
+  --orange-a6: #ff81007d;
+  --orange-a7: #ed6c008c;
+  --orange-a8: #e35f00aa;
+  --orange-a9: #f65e00ea;
+  --orange-a10: #ef5f00;
+  --orange-a11: #cc4e00;
+  --orange-a12: #431200e2;
+  --orange-surface: #fff5e9cc;
+
+  /* Cores semânticas: o mapeamento e o critério estão no `@theme inline`. */
+  --ui-background: #fff;
+  --ui-panel: #fff;
+  --ui-current-surface: var(--ui-background);
+  --ui-overlay: var(--black-a6);
+  --ui-focus-ring: var(--gray-12);
 }
 
 /**
- * Tokens de cores para tema escuro
- *
- * Sobrescreve os valores de cores quando o atributo data-theme="dark" está presente no :root.
- * Ativado dinamicamente através da preferência do sistema do usuário
- * ou diretamente ao alternar o tema da aplicação.
- *
- * Integração com Tailwind:
- * - Mantém os mesmos nomes de variáveis CSS do tema claro (--brand-9, --gray-12, etc.)
- * - Ao trocar o tema, as utilities do Tailwind automaticamente refletem os novos valores
- * - Não é necessário prefixar classes com dark: se você quer que a mesma cor mude entre temas
- * - Use a variante dark: (ex: dark:bg-gray-1) para aplicar cores/estilos exclusivos do tema escuro
- * - A propriedade color-scheme: dark otimiza controles nativos do navegador para o modo escuro
- *
- * Exemplo:
- * - bg-brand-9 → usa #5b5bd6 tanto no tema claro quanto no escuro (accent não muda)
- * - text-gray-12 → usa #202020 no tema claro e #eeeeee no tema escuro
- * - dark:bg-gray-3 → aplica #222222 apenas quando o tema escuro está ativo
+ * Valores do tema escuro, num `data-theme="dark"` no `<html>` ou num container: as mesmas
+ * variáveis do tema claro (ver o comentário dele).
  */
 :root[data-theme="dark"],
 :where([data-theme="dark"]) {
   color-scheme: dark;
 
-  --brand-1: #13131e;
-  --brand-2: #171625;
-  --brand-3: #202248;
-  --brand-4: #262a65;
-  --brand-5: #303374;
-  --brand-6: #3d3e82;
-  --brand-7: #4a4a95;
-  --brand-8: #5958b1;
-  --brand-9: #5b5bd6;
-  --brand-10: #6e6ade;
-  --brand-11: #b1a9ff;
-  --brand-12: #e0dffe;
-
-  --brand-alpha-1: #3636fe0e;
-  --brand-alpha-2: #564bf916;
-  --brand-alpha-3: #525bff3b;
-  --brand-alpha-4: #4d58ff5a;
-  --brand-alpha-5: #5b62fd6b;
-  --brand-alpha-6: #6d6ffd7a;
-  --brand-alpha-7: #7777fe8e;
-  --brand-alpha-8: #7b7afeac;
-  --brand-alpha-9: #6a6afed4;
-  --brand-alpha-10: #7d79ffdc;
-  --brand-alpha-11: #b1a9ff;
-  --brand-alpha-12: #e1e0fffe;
-
-  --gray: #6e6e6e;
+  --accent-1: #13131e;
+  --accent-2: #171625;
+  --accent-3: #202248;
+  --accent-4: #262a65;
+  --accent-5: #303374;
+  --accent-6: #3d3e82;
+  --accent-7: #4a4a95;
+  --accent-8: #5958b1;
+  --accent-9: #5b5bd6;
+  --accent-10: #6e6ade;
+  --accent-11: #b1a9ff;
+  --accent-12: #e0dffe;
+  --accent-a1: #3636fe0e;
+  --accent-a2: #564bf916;
+  --accent-a3: #525bff3b;
+  --accent-a4: #4d58ff5a;
+  --accent-a5: #5b62fd6b;
+  --accent-a6: #6d6ffd7a;
+  --accent-a7: #7777fe8e;
+  --accent-a8: #7b7afeac;
+  --accent-a9: #6a6afed4;
+  --accent-a10: #7d79ffdc;
+  --accent-a11: #b1a9ff;
+  --accent-a12: #e1e0fffe;
+  --accent-surface: #1d1b3980;
+
   --gray-1: #111111;
   --gray-2: #191919;
   --gray-3: #222222;
@@ -1919,19 +1952,19 @@
   --gray-10: #7b7b7b;
   --gray-11: #b4b4b4;
   --gray-12: #eeeeee;
-
-  --gray-alpha-1: #00000000;
-  --gray-alpha-2: #ffffff09;
-  --gray-alpha-3: #ffffff12;
-  --gray-alpha-4: #ffffff1b;
-  --gray-alpha-5: #ffffff22;
-  --gray-alpha-6: #ffffff2c;
-  --gray-alpha-7: #ffffff3b;
-  --gray-alpha-8: #ffffff55;
-  --gray-alpha-9: #ffffff64;
-  --gray-alpha-10: #ffffff72;
-  --gray-alpha-11: #ffffffaf;
-  --gray-alpha-12: #ffffffed;
+  --gray-a1: #00000000;
+  --gray-a2: #ffffff09;
+  --gray-a3: #ffffff12;
+  --gray-a4: #ffffff1b;
+  --gray-a5: #ffffff22;
+  --gray-a6: #ffffff2c;
+  --gray-a7: #ffffff3b;
+  --gray-a8: #ffffff55;
+  --gray-a9: #ffffff64;
+  --gray-a10: #ffffff72;
+  --gray-a11: #ffffffaf;
+  --gray-a12: #ffffffed;
+  --gray-surface: #21212180;
 
   --tomato-1: #181111;
   --tomato-2: #1f1513;
@@ -1945,19 +1978,19 @@
   --tomato-10: #ec6142;
   --tomato-11: #ff977d;
   --tomato-12: #fbd3cb;
-
-  --tomato-alpha-1: #f1121208;
-  --tomato-alpha-2: #ff55330f;
-  --tomato-alpha-3: #ff35232b;
-  --tomato-alpha-4: #fd201142;
-  --tomato-alpha-5: #fe332153;
-  --tomato-alpha-6: #ff4f3864;
-  --tomato-alpha-7: #fd644a7d;
-  --tomato-alpha-8: #fe6d4ea7;
-  --tomato-alpha-9: #fe5431e4;
-  --tomato-alpha-10: #ff6847eb;
-  --tomato-alpha-11: #ff977d;
-  --tomato-alpha-12: #ffd6cefb;
+  --tomato-a1: #f1121208;
+  --tomato-a2: #ff55330f;
+  --tomato-a3: #ff35232b;
+  --tomato-a4: #fd201142;
+  --tomato-a5: #fe332153;
+  --tomato-a6: #ff4f3864;
+  --tomato-a7: #fd644a7d;
+  --tomato-a8: #fe6d4ea7;
+  --tomato-a9: #fe5431e4;
+  --tomato-a10: #ff6847eb;
+  --tomato-a11: #ff977d;
+  --tomato-a12: #ffd6cefb;
+  --tomato-surface: #2d191580;
 
   --red-1: #191111;
   --red-2: #201314;
@@ -1971,19 +2004,19 @@
   --red-10: #ec5d5e;
   --red-11: #ff9592;
   --red-12: #ffd1d9;
-
-  --red-alpha-1: #f4121209;
-  --red-alpha-2: #f22f3e11;
-  --red-alpha-3: #ff173f2d;
-  --red-alpha-4: #fe0a3b44;
-  --red-alpha-5: #ff204756;
-  --red-alpha-6: #ff3e5668;
-  --red-alpha-7: #ff536184;
-  --red-alpha-8: #ff5d61b0;
-  --red-alpha-9: #fe4e54e4;
-  --red-alpha-10: #ff6465eb;
-  --red-alpha-11: #ff9592;
-  --red-alpha-12: #ffd1d9;
+  --red-a1: #f4121209;
+  --red-a2: #f22f3e11;
+  --red-a3: #ff173f2d;
+  --red-a4: #fe0a3b44;
+  --red-a5: #ff204756;
+  --red-a6: #ff3e5668;
+  --red-a7: #ff536184;
+  --red-a8: #ff5d61b0;
+  --red-a9: #fe4e54e4;
+  --red-a10: #ff6465eb;
+  --red-a11: #ff9592;
+  --red-a12: #ffd1d9;
+  --red-surface: #2f151780;
 
   --ruby-1: #191113;
   --ruby-2: #1e1517;
@@ -1997,19 +2030,19 @@
   --ruby-10: #ec5a72;
   --ruby-11: #ff949d;
   --ruby-12: #fed2e1;
-
-  --ruby-alpha-1: #f4124a09;
-  --ruby-alpha-2: #fe5a7f0e;
-  --ruby-alpha-3: #ff235d2c;
-  --ruby-alpha-4: #fd195e42;
-  --ruby-alpha-5: #fe2d6b53;
-  --ruby-alpha-6: #ff447665;
-  --ruby-alpha-7: #ff577d80;
-  --ruby-alpha-8: #ff5c7cae;
-  --ruby-alpha-9: #fe4c70e4;
-  --ruby-alpha-10: #ff617beb;
-  --ruby-alpha-11: #ff949d;
-  --ruby-alpha-12: #ffd3e2fe;
+  --ruby-a1: #f4124a09;
+  --ruby-a2: #fe5a7f0e;
+  --ruby-a3: #ff235d2c;
+  --ruby-a4: #fd195e42;
+  --ruby-a5: #fe2d6b53;
+  --ruby-a6: #ff447665;
+  --ruby-a7: #ff577d80;
+  --ruby-a8: #ff5c7cae;
+  --ruby-a9: #fe4c70e4;
+  --ruby-a10: #ff617beb;
+  --ruby-a11: #ff949d;
+  --ruby-a12: #ffd3e2fe;
+  --ruby-surface: #2b191d80;
 
   --crimson-1: #191114;
   --crimson-2: #201318;
@@ -2023,19 +2056,19 @@
   --crimson-10: #ee518a;
   --crimson-11: #ff92ad;
   --crimson-12: #fdd3e8;
-
-  --crimson-alpha-1: #f4126709;
-  --crimson-alpha-2: #f22f7a11;
-  --crimson-alpha-3: #fe2a8b2a;
-  --crimson-alpha-4: #fd158741;
-  --crimson-alpha-5: #fd278f51;
-  --crimson-alpha-6: #fe459763;
-  --crimson-alpha-7: #fd559b7f;
-  --crimson-alpha-8: #fe5b9bab;
-  --crimson-alpha-9: #fe418de8;
-  --crimson-alpha-10: #ff5693ed;
-  --crimson-alpha-11: #ff92ad;
-  --crimson-alpha-12: #ffd5eafd;
+  --crimson-a1: #f4126709;
+  --crimson-a2: #f22f7a11;
+  --crimson-a3: #fe2a8b2a;
+  --crimson-a4: #fd158741;
+  --crimson-a5: #fd278f51;
+  --crimson-a6: #fe459763;
+  --crimson-a7: #fd559b7f;
+  --crimson-a8: #fe5b9bab;
+  --crimson-a9: #fe418de8;
+  --crimson-a10: #ff5693ed;
+  --crimson-a11: #ff92ad;
+  --crimson-a12: #ffd5eafd;
+  --crimson-surface: #2f151f80;
 
   --pink-1: #191117;
   --pink-2: #21121d;
@@ -2049,19 +2082,19 @@
   --pink-10: #de51a8;
   --pink-11: #ff8dcc;
   --pink-12: #fdd1ea;
-
-  --pink-alpha-1: #f412bc09;
-  --pink-alpha-2: #f420bb12;
-  --pink-alpha-3: #fe37cc29;
-  --pink-alpha-4: #fc1ec43f;
-  --pink-alpha-5: #fd35c24e;
-  --pink-alpha-6: #fd51c75f;
-  --pink-alpha-7: #fd62c87b;
-  --pink-alpha-8: #ff68c8a2;
-  --pink-alpha-9: #fe49bcd4;
-  --pink-alpha-10: #ff5cc0dc;
-  --pink-alpha-11: #ff8dcc;
-  --pink-alpha-12: #ffd3ecfd;
+  --pink-a1: #f412bc09;
+  --pink-a2: #f420bb12;
+  --pink-a3: #fe37cc29;
+  --pink-a4: #fc1ec43f;
+  --pink-a5: #fd35c24e;
+  --pink-a6: #fd51c75f;
+  --pink-a7: #fd62c87b;
+  --pink-a8: #ff68c8a2;
+  --pink-a9: #fe49bcd4;
+  --pink-a10: #ff5cc0dc;
+  --pink-a11: #ff8dcc;
+  --pink-a12: #ffd3ecfd;
+  --pink-surface: #31132980;
 
   --plum-1: #181118;
   --plum-2: #201320;
@@ -2075,19 +2108,19 @@
   --plum-10: #b658c4;
   --plum-11: #e796f3;
   --plum-12: #f4d4f4;
-
-  --plum-alpha-1: #f112f108;
-  --plum-alpha-2: #f22ff211;
-  --plum-alpha-3: #fd4cfd27;
-  --plum-alpha-4: #f646ff3a;
-  --plum-alpha-5: #f455ff48;
-  --plum-alpha-6: #f66dff56;
-  --plum-alpha-7: #f07cfd70;
-  --plum-alpha-8: #ee84ff95;
-  --plum-alpha-9: #e961feb6;
-  --plum-alpha-10: #ed70ffc0;
-  --plum-alpha-11: #f19cfef3;
-  --plum-alpha-12: #feddfef4;
+  --plum-a1: #f112f108;
+  --plum-a2: #f22ff211;
+  --plum-a3: #fd4cfd27;
+  --plum-a4: #f646ff3a;
+  --plum-a5: #f455ff48;
+  --plum-a6: #f66dff56;
+  --plum-a7: #f07cfd70;
+  --plum-a8: #ee84ff95;
+  --plum-a9: #e961feb6;
+  --plum-a10: #ed70ffc0;
+  --plum-a11: #f19cfef3;
+  --plum-a12: #feddfef4;
+  --plum-surface: #2f152f80;
 
   --purple-1: #18111b;
   --purple-2: #1e1523;
@@ -2101,19 +2134,19 @@
   --purple-10: #9a5cd0;
   --purple-11: #d19dff;
   --purple-12: #ecd9fa;
-
-  --purple-alpha-1: #b412f90b;
-  --purple-alpha-2: #b744f714;
-  --purple-alpha-3: #c150ff2d;
-  --purple-alpha-4: #bb53fd42;
-  --purple-alpha-5: #be5cfd51;
-  --purple-alpha-6: #c16dfd61;
-  --purple-alpha-7: #c378fd7a;
-  --purple-alpha-8: #c47effa4;
-  --purple-alpha-9: #b661ffc2;
-  --purple-alpha-10: #bc6fffcd;
-  --purple-alpha-11: #d19dff;
-  --purple-alpha-12: #f1ddfffa;
+  --purple-a1: #b412f90b;
+  --purple-a2: #b744f714;
+  --purple-a3: #c150ff2d;
+  --purple-a4: #bb53fd42;
+  --purple-a5: #be5cfd51;
+  --purple-a6: #c16dfd61;
+  --purple-a7: #c378fd7a;
+  --purple-a8: #c47effa4;
+  --purple-a9: #b661ffc2;
+  --purple-a10: #bc6fffcd;
+  --purple-a11: #d19dff;
+  --purple-a12: #f1ddfffa;
+  --purple-surface: #2b173580;
 
   --violet-1: #14121f;
   --violet-2: #1b1525;
@@ -2127,19 +2160,19 @@
   --violet-10: #7d66d9;
   --violet-11: #baa7ff;
   --violet-12: #e2ddfe;
-
-  --violet-alpha-1: #4422ff0f;
-  --violet-alpha-2: #853ff916;
-  --violet-alpha-3: #8354fe36;
-  --violet-alpha-4: #7d51fd50;
-  --violet-alpha-5: #845ffd5f;
-  --violet-alpha-6: #8f6cfd6d;
-  --violet-alpha-7: #9879ff83;
-  --violet-alpha-8: #977dfea8;
-  --violet-alpha-9: #8668ffcc;
-  --violet-alpha-10: #9176fed7;
-  --violet-alpha-11: #baa7ff;
-  --violet-alpha-12: #e3defffe;
+  --violet-a1: #4422ff0f;
+  --violet-a2: #853ff916;
+  --violet-a3: #8354fe36;
+  --violet-a4: #7d51fd50;
+  --violet-a5: #845ffd5f;
+  --violet-a6: #8f6cfd6d;
+  --violet-a7: #9879ff83;
+  --violet-a8: #977dfea8;
+  --violet-a9: #8668ffcc;
+  --violet-a10: #9176fed7;
+  --violet-a11: #baa7ff;
+  --violet-a12: #e3defffe;
+  --violet-surface: #25193980;
 
   --iris-1: #13131e;
   --iris-2: #171625;
@@ -2153,19 +2186,19 @@
   --iris-10: #6e6ade;
   --iris-11: #b1a9ff;
   --iris-12: #e0dffe;
-
-  --iris-alpha-1: #3636fe0e;
-  --iris-alpha-2: #564bf916;
-  --iris-alpha-3: #525bff3b;
-  --iris-alpha-4: #4d58ff5a;
-  --iris-alpha-5: #5b62fd6b;
-  --iris-alpha-6: #6d6ffd7a;
-  --iris-alpha-7: #7777fe8e;
-  --iris-alpha-8: #7b7afeac;
-  --iris-alpha-9: #6a6afed4;
-  --iris-alpha-10: #7d79ffdc;
-  --iris-alpha-11: #b1a9ff;
-  --iris-alpha-12: #e1e0fffe;
+  --iris-a1: #3636fe0e;
+  --iris-a2: #564bf916;
+  --iris-a3: #525bff3b;
+  --iris-a4: #4d58ff5a;
+  --iris-a5: #5b62fd6b;
+  --iris-a6: #6d6ffd7a;
+  --iris-a7: #7777fe8e;
+  --iris-a8: #7b7afeac;
+  --iris-a9: #6a6afed4;
+  --iris-a10: #7d79ffdc;
+  --iris-a11: #b1a9ff;
+  --iris-a12: #e1e0fffe;
+  --iris-surface: #1d1b3980;
 
   --indigo-1: #11131f;
   --indigo-2: #141726;
@@ -2179,19 +2212,19 @@
   --indigo-10: #5472e4;
   --indigo-11: #9eb1ff;
   --indigo-12: #d6e1ff;
-
-  --indigo-alpha-1: #1133ff0f;
-  --indigo-alpha-2: #3354fa17;
-  --indigo-alpha-3: #2f62ff3c;
-  --indigo-alpha-4: #3566ff57;
-  --indigo-alpha-5: #4171fd6b;
-  --indigo-alpha-6: #5178fd7c;
-  --indigo-alpha-7: #5a7fff90;
-  --indigo-alpha-8: #5b81feac;
-  --indigo-alpha-9: #4671ffdb;
-  --indigo-alpha-10: #5c7efee3;
-  --indigo-alpha-11: #9eb1ff;
-  --indigo-alpha-12: #d6e1ff;
+  --indigo-a1: #1133ff0f;
+  --indigo-a2: #3354fa17;
+  --indigo-a3: #2f62ff3c;
+  --indigo-a4: #3566ff57;
+  --indigo-a5: #4171fd6b;
+  --indigo-a6: #5178fd7c;
+  --indigo-a7: #5a7fff90;
+  --indigo-a8: #5b81feac;
+  --indigo-a9: #4671ffdb;
+  --indigo-a10: #5c7efee3;
+  --indigo-a11: #9eb1ff;
+  --indigo-a12: #d6e1ff;
+  --indigo-surface: #171d3b80;
 
   --blue-1: #0d1520;
   --blue-2: #111927;
@@ -2205,19 +2238,19 @@
   --blue-10: #3b9eff;
   --blue-11: #70b8ff;
   --blue-12: #c2e6ff;
-
-  --blue-alpha-1: #004df211;
-  --blue-alpha-2: #1166fb18;
-  --blue-alpha-3: #0077ff3a;
-  --blue-alpha-4: #0075ff57;
-  --blue-alpha-5: #0081fd6b;
-  --blue-alpha-6: #0f89fd7f;
-  --blue-alpha-7: #2a91fe98;
-  --blue-alpha-8: #3094feb9;
-  --blue-alpha-9: #0090ff;
-  --blue-alpha-10: #3b9eff;
-  --blue-alpha-11: #70b8ff;
-  --blue-alpha-12: #c2e6ff;
+  --blue-a1: #004df211;
+  --blue-a2: #1166fb18;
+  --blue-a3: #0077ff3a;
+  --blue-a4: #0075ff57;
+  --blue-a5: #0081fd6b;
+  --blue-a6: #0f89fd7f;
+  --blue-a7: #2a91fe98;
+  --blue-a8: #3094feb9;
+  --blue-a9: #0090ff;
+  --blue-a10: #3b9eff;
+  --blue-a11: #70b8ff;
+  --blue-a12: #c2e6ff;
+  --blue-surface: #11213d80;
 
   --cyan-1: #0b161a;
   --cyan-2: #101b20;
@@ -2231,19 +2264,19 @@
   --cyan-10: #23afd0;
   --cyan-11: #4ccce6;
   --cyan-12: #b6ecf7;
-
-  --cyan-alpha-1: #0091f70a;
-  --cyan-alpha-2: #02a7f211;
-  --cyan-alpha-3: #00befd28;
-  --cyan-alpha-4: #00baff3b;
-  --cyan-alpha-5: #00befd4d;
-  --cyan-alpha-6: #00c7fd5e;
-  --cyan-alpha-7: #14cdff75;
-  --cyan-alpha-8: #11cfff95;
-  --cyan-alpha-9: #00cfffc3;
-  --cyan-alpha-10: #28d6ffcd;
-  --cyan-alpha-11: #52e1fee5;
-  --cyan-alpha-12: #bbf3fef7;
+  --cyan-a1: #0091f70a;
+  --cyan-a2: #02a7f211;
+  --cyan-a3: #00befd28;
+  --cyan-a4: #00baff3b;
+  --cyan-a5: #00befd4d;
+  --cyan-a6: #00c7fd5e;
+  --cyan-a7: #14cdff75;
+  --cyan-a8: #11cfff95;
+  --cyan-a9: #00cfffc3;
+  --cyan-a10: #28d6ffcd;
+  --cyan-a11: #52e1fee5;
+  --cyan-a12: #bbf3fef7;
+  --cyan-surface: #11252d80;
 
   --teal-1: #0d1514;
   --teal-2: #111c1b;
@@ -2257,19 +2290,19 @@
   --teal-10: #0eb39e;
   --teal-11: #0bd8b6;
   --teal-12: #adf0dd;
-
-  --teal-alpha-1: #00deab05;
-  --teal-alpha-2: #12fbe60c;
-  --teal-alpha-3: #00ffe61e;
-  --teal-alpha-4: #00ffe92d;
-  --teal-alpha-5: #00ffea3b;
-  --teal-alpha-6: #1cffe84b;
-  --teal-alpha-7: #2efde85f;
-  --teal-alpha-8: #32ffe775;
-  --teal-alpha-9: #13ffe49f;
-  --teal-alpha-10: #0dffe0ae;
-  --teal-alpha-11: #0afed5d6;
-  --teal-alpha-12: #b8ffebef;
+  --teal-a1: #00deab05;
+  --teal-a2: #12fbe60c;
+  --teal-a3: #00ffe61e;
+  --teal-a4: #00ffe92d;
+  --teal-a5: #00ffea3b;
+  --teal-a6: #1cffe84b;
+  --teal-a7: #2efde85f;
+  --teal-a8: #32ffe775;
+  --teal-a9: #13ffe49f;
+  --teal-a10: #0dffe0ae;
+  --teal-a11: #0afed5d6;
+  --teal-a12: #b8ffebef;
+  --teal-surface: #13272580;
 
   --jade-1: #0d1512;
   --jade-2: #121c18;
@@ -2283,19 +2316,19 @@
   --jade-10: #27b08b;
   --jade-11: #1fd8a4;
   --jade-12: #adf0d4;
-
-  --jade-alpha-1: #00de4505;
-  --jade-alpha-2: #27fba60c;
-  --jade-alpha-3: #02f99920;
-  --jade-alpha-4: #00ffaa2d;
-  --jade-alpha-5: #11ffb63b;
-  --jade-alpha-6: #34ffc24b;
-  --jade-alpha-7: #45fdc75e;
-  --jade-alpha-8: #48ffcf75;
-  --jade-alpha-9: #38feca9d;
-  --jade-alpha-10: #31fec7ab;
-  --jade-alpha-11: #21fec0d6;
-  --jade-alpha-12: #b8ffe1ef;
+  --jade-a1: #00de4505;
+  --jade-a2: #27fba60c;
+  --jade-a3: #02f99920;
+  --jade-a4: #00ffaa2d;
+  --jade-a5: #11ffb63b;
+  --jade-a6: #34ffc24b;
+  --jade-a7: #45fdc75e;
+  --jade-a8: #48ffcf75;
+  --jade-a9: #38feca9d;
+  --jade-a10: #31fec7ab;
+  --jade-a11: #21fec0d6;
+  --jade-a12: #b8ffe1ef;
+  --jade-surface: #13271f80;
 
   --green-1: #0e1512;
   --green-2: #121b17;
@@ -2309,19 +2342,19 @@
   --green-10: #33b074;
   --green-11: #3dd68c;
   --green-12: #b1f1cb;
-
-  --green-alpha-1: #00de4505;
-  --green-alpha-2: #29f99d0b;
-  --green-alpha-3: #22ff991e;
-  --green-alpha-4: #11ff992d;
-  --green-alpha-5: #2bffa23c;
-  --green-alpha-6: #44ffaa4b;
-  --green-alpha-7: #50fdac5e;
-  --green-alpha-8: #54ffad73;
-  --green-alpha-9: #44ffa49e;
-  --green-alpha-10: #43fea4ab;
-  --green-alpha-11: #46fea5d4;
-  --green-alpha-12: #bbffd7f0;
+  --green-a1: #00de4505;
+  --green-a2: #29f99d0b;
+  --green-a3: #22ff991e;
+  --green-a4: #11ff992d;
+  --green-a5: #2bffa23c;
+  --green-a6: #44ffaa4b;
+  --green-a7: #50fdac5e;
+  --green-a8: #54ffad73;
+  --green-a9: #44ffa49e;
+  --green-a10: #43fea4ab;
+  --green-a11: #46fea5d4;
+  --green-a12: #bbffd7f0;
+  --green-surface: #15251d80;
 
   --grass-1: #0e1511;
   --grass-2: #141a15;
@@ -2335,19 +2368,19 @@
   --grass-10: #53b365;
   --grass-11: #71d083;
   --grass-12: #c2f0c2;
-
-  --grass-alpha-1: #00de1205;
-  --grass-alpha-2: #5ef7780a;
-  --grass-alpha-3: #70fe8c1b;
-  --grass-alpha-4: #57ff802c;
-  --grass-alpha-5: #68ff8b3b;
-  --grass-alpha-6: #71ff8f4b;
-  --grass-alpha-7: #77fd925d;
-  --grass-alpha-8: #77fd9070;
-  --grass-alpha-9: #65ff82a1;
-  --grass-alpha-10: #72ff8dae;
-  --grass-alpha-11: #89ff9fcd;
-  --grass-alpha-12: #ceffceef;
+  --grass-a1: #00de1205;
+  --grass-a2: #5ef7780a;
+  --grass-a3: #70fe8c1b;
+  --grass-a4: #57ff802c;
+  --grass-a5: #68ff8b3b;
+  --grass-a6: #71ff8f4b;
+  --grass-a7: #77fd925d;
+  --grass-a8: #77fd9070;
+  --grass-a9: #65ff82a1;
+  --grass-a10: #72ff8dae;
+  --grass-a11: #89ff9fcd;
+  --grass-a12: #ceffceef;
+  --grass-surface: #19231b80;
 
   --brown-1: #12110f;
   --brown-2: #1c1816;
@@ -2361,19 +2394,19 @@
   --brown-10: #b88c67;
   --brown-11: #dbb594;
   --brown-12: #f2e1ca;
-
-  --brown-alpha-1: #91110002;
-  --brown-alpha-2: #fba67c0c;
-  --brown-alpha-3: #fcb58c19;
-  --brown-alpha-4: #fbbb8a24;
-  --brown-alpha-5: #fcb88931;
-  --brown-alpha-6: #fdba8741;
-  --brown-alpha-7: #ffbb8856;
-  --brown-alpha-8: #ffbe8773;
-  --brown-alpha-9: #feb87da8;
-  --brown-alpha-10: #ffc18cb3;
-  --brown-alpha-11: #fed1aad9;
-  --brown-alpha-12: #feecd4f2;
+  --brown-a1: #91110002;
+  --brown-a2: #fba67c0c;
+  --brown-a3: #fcb58c19;
+  --brown-a4: #fbbb8a24;
+  --brown-a5: #fcb88931;
+  --brown-a6: #fdba8741;
+  --brown-a7: #ffbb8856;
+  --brown-a8: #ffbe8773;
+  --brown-a9: #feb87da8;
+  --brown-a10: #ffc18cb3;
+  --brown-a11: #fed1aad9;
+  --brown-a12: #feecd4f2;
+  --brown-surface: #271f1b80;
 
   --bronze-1: #141110;
   --bronze-2: #1c1917;
@@ -2387,19 +2420,19 @@
   --bronze-10: #ae8c7e;
   --bronze-11: #d4b3a5;
   --bronze-12: #ede0d9;
-
-  --bronze-alpha-1: #d1110004;
-  --bronze-alpha-2: #fbbc910c;
-  --bronze-alpha-3: #faceb817;
-  --bronze-alpha-4: #facdb622;
-  --bronze-alpha-5: #ffd2c12d;
-  --bronze-alpha-6: #ffd1c03c;
-  --bronze-alpha-7: #fdd0c04f;
-  --bronze-alpha-8: #ffd6c565;
-  --bronze-alpha-9: #fec7b09b;
-  --bronze-alpha-10: #fecab5a9;
-  --bronze-alpha-11: #ffd7c6d1;
-  --bronze-alpha-12: #fff1e9ec;
+  --bronze-a1: #d1110004;
+  --bronze-a2: #fbbc910c;
+  --bronze-a3: #faceb817;
+  --bronze-a4: #facdb622;
+  --bronze-a5: #ffd2c12d;
+  --bronze-a6: #ffd1c03c;
+  --bronze-a7: #fdd0c04f;
+  --bronze-a8: #ffd6c565;
+  --bronze-a9: #fec7b09b;
+  --bronze-a10: #fecab5a9;
+  --bronze-a11: #ffd7c6d1;
+  --bronze-a12: #fff1e9ec;
+  --bronze-surface: #27211d80;
 
   --gold-1: #121211;
   --gold-2: #1b1a17;
@@ -2413,19 +2446,19 @@
   --gold-10: #a39073;
   --gold-11: #cbb99f;
   --gold-12: #e8e2d9;
-
-  --gold-alpha-1: #91911102;
-  --gold-alpha-2: #f9e29d0b;
-  --gold-alpha-3: #f8ecbb15;
-  --gold-alpha-4: #ffeec41e;
-  --gold-alpha-5: #feecc22a;
-  --gold-alpha-6: #feebcb37;
-  --gold-alpha-7: #ffedcd48;
-  --gold-alpha-8: #fdeaca5f;
-  --gold-alpha-9: #ffdba690;
-  --gold-alpha-10: #fedfb09d;
-  --gold-alpha-11: #fee7c6c8;
-  --gold-alpha-12: #fef7ede7;
+  --gold-a1: #91911102;
+  --gold-a2: #f9e29d0b;
+  --gold-a3: #f8ecbb15;
+  --gold-a4: #ffeec41e;
+  --gold-a5: #feecc22a;
+  --gold-a6: #feebcb37;
+  --gold-a7: #ffedcd48;
+  --gold-a8: #fdeaca5f;
+  --gold-a9: #ffdba690;
+  --gold-a10: #fedfb09d;
+  --gold-a11: #fee7c6c8;
+  --gold-a12: #fef7ede7;
+  --gold-surface: #25231d80;
 
   --sky-1: #0d141f;
   --sky-2: #111a27;
@@ -2439,19 +2472,19 @@
   --sky-10: #a8eeff;
   --sky-11: #75c7f0;
   --sky-12: #c2f3ff;
-
-  --sky-alpha-1: #0044ff0f;
-  --sky-alpha-2: #1171fb18;
-  --sky-alpha-3: #1184fc33;
-  --sky-alpha-4: #128fff49;
-  --sky-alpha-5: #1c9dfd5d;
-  --sky-alpha-6: #28a5ff72;
-  --sky-alpha-7: #2badfe8b;
-  --sky-alpha-8: #1db2fea9;
-  --sky-alpha-9: #7ce3fffe;
-  --sky-alpha-10: #a8eeff;
-  --sky-alpha-11: #7cd3ffef;
-  --sky-alpha-12: #c2f3ff;
+  --sky-a1: #0044ff0f;
+  --sky-a2: #1171fb18;
+  --sky-a3: #1184fc33;
+  --sky-a4: #128fff49;
+  --sky-a5: #1c9dfd5d;
+  --sky-a6: #28a5ff72;
+  --sky-a7: #2badfe8b;
+  --sky-a8: #1db2fea9;
+  --sky-a9: #7ce3fffe;
+  --sky-a10: #a8eeff;
+  --sky-a11: #7cd3ffef;
+  --sky-a12: #c2f3ff;
+  --sky-surface: #13233b80;
 
   --mint-1: #0e1515;
   --mint-2: #0f1b1b;
@@ -2465,19 +2498,19 @@
   --mint-10: #a8f5e5;
   --mint-11: #58d5ba;
   --mint-12: #c4f5e1;
-
-  --mint-alpha-1: #00dede05;
-  --mint-alpha-2: #00f9f90b;
-  --mint-alpha-3: #00fff61d;
-  --mint-alpha-4: #00fff42c;
-  --mint-alpha-5: #00fff23a;
-  --mint-alpha-6: #0effeb4a;
-  --mint-alpha-7: #34fde55e;
-  --mint-alpha-8: #41ffdf76;
-  --mint-alpha-9: #92ffe7e9;
-  --mint-alpha-10: #aefeedf5;
-  --mint-alpha-11: #67ffded2;
-  --mint-alpha-12: #cbfee9f5;
+  --mint-a1: #00dede05;
+  --mint-a2: #00f9f90b;
+  --mint-a3: #00fff61d;
+  --mint-a4: #00fff42c;
+  --mint-a5: #00fff23a;
+  --mint-a6: #0effeb4a;
+  --mint-a7: #34fde55e;
+  --mint-a8: #41ffdf76;
+  --mint-a9: #92ffe7e9;
+  --mint-a10: #aefeedf5;
+  --mint-a11: #67ffded2;
+  --mint-a12: #cbfee9f5;
+  --mint-surface: #15272780;
 
   --lime-1: #11130c;
   --lime-2: #151a10;
@@ -2491,19 +2524,19 @@
   --lime-10: #d4ff70;
   --lime-11: #bde56c;
   --lime-12: #e3f7ba;
-
-  --lime-alpha-1: #11bb0003;
-  --lime-alpha-2: #78f7000a;
-  --lime-alpha-3: #9bfd4c1a;
-  --lime-alpha-4: #a7fe5c29;
-  --lime-alpha-5: #affe6537;
-  --lime-alpha-6: #b2fe6d46;
-  --lime-alpha-7: #b6ff6f57;
-  --lime-alpha-8: #b6fd6d6c;
-  --lime-alpha-9: #caff69ed;
-  --lime-alpha-10: #d4ff70;
-  --lime-alpha-11: #d1fe77e4;
-  --lime-alpha-12: #e9febff7;
+  --lime-a1: #11bb0003;
+  --lime-a2: #78f7000a;
+  --lime-a3: #9bfd4c1a;
+  --lime-a4: #a7fe5c29;
+  --lime-a5: #affe6537;
+  --lime-a6: #b2fe6d46;
+  --lime-a7: #b6ff6f57;
+  --lime-a8: #b6fd6d6c;
+  --lime-a9: #caff69ed;
+  --lime-a10: #d4ff70;
+  --lime-a11: #d1fe77e4;
+  --lime-a12: #e9febff7;
+  --lime-surface: #1b211580;
 
   --yellow-1: #14120b;
   --yellow-2: #1b180f;
@@ -2517,19 +2550,19 @@
   --yellow-10: #ffff57;
   --yellow-11: #f5e147;
   --yellow-12: #f6eeb4;
-
-  --yellow-alpha-1: #d1510004;
-  --yellow-alpha-2: #f9b4000b;
-  --yellow-alpha-3: #ffaa001e;
-  --yellow-alpha-4: #fdb70028;
-  --yellow-alpha-5: #febb0036;
-  --yellow-alpha-6: #fec40046;
-  --yellow-alpha-7: #fdcb225c;
-  --yellow-alpha-8: #fdca327b;
-  --yellow-alpha-9: #ffe629;
-  --yellow-alpha-10: #ffff57;
-  --yellow-alpha-11: #fee949f5;
-  --yellow-alpha-12: #fef6baf6;
+  --yellow-a1: #d1510004;
+  --yellow-a2: #f9b4000b;
+  --yellow-a3: #ffaa001e;
+  --yellow-a4: #fdb70028;
+  --yellow-a5: #febb0036;
+  --yellow-a6: #fec40046;
+  --yellow-a7: #fdcb225c;
+  --yellow-a8: #fdca327b;
+  --yellow-a9: #ffe629;
+  --yellow-a10: #ffff57;
+  --yellow-a11: #fee949f5;
+  --yellow-a12: #fef6baf6;
+  --yellow-surface: #231f1380;
 
   --amber-1: #16120c;
   --amber-2: #1d180f;
@@ -2543,19 +2576,19 @@
   --amber-10: #ffd60a;
   --amber-11: #ffca16;
   --amber-12: #ffe7b3;
-
-  --amber-alpha-1: #e63c0006;
-  --amber-alpha-2: #fd9b000d;
-  --amber-alpha-3: #fa820022;
-  --amber-alpha-4: #fc820032;
-  --amber-alpha-5: #fd8b0041;
-  --amber-alpha-6: #fd9b0051;
-  --amber-alpha-7: #ffab2567;
-  --amber-alpha-8: #ffae3587;
-  --amber-alpha-9: #ffc53d;
-  --amber-alpha-10: #ffd60a;
-  --amber-alpha-11: #ffca16;
-  --amber-alpha-12: #ffe7b3;
+  --amber-a1: #e63c0006;
+  --amber-a2: #fd9b000d;
+  --amber-a3: #fa820022;
+  --amber-a4: #fc820032;
+  --amber-a5: #fd8b0041;
+  --amber-a6: #fd9b0051;
+  --amber-a7: #ffab2567;
+  --amber-a8: #ffae3587;
+  --amber-a9: #ffc53d;
+  --amber-a10: #ffd60a;
+  --amber-a11: #ffca16;
+  --amber-a12: #ffe7b3;
+  --amber-surface: #271f1380;
 
   --orange-1: #17120e;
   --orange-2: #1e160f;
@@ -2569,19 +2602,26 @@
   --orange-10: #ff801f;
   --orange-11: #ffa057;
   --orange-12: #ffe0c2;
-
-  --orange-alpha-1: #ec360007;
-  --orange-alpha-2: #fe6d000e;
-  --orange-alpha-3: #fb6a0025;
-  --orange-alpha-4: #ff590039;
-  --orange-alpha-5: #ff61004a;
-  --orange-alpha-6: #fd75045c;
-  --orange-alpha-7: #ff832c75;
-  --orange-alpha-8: #fe84389d;
-  --orange-alpha-9: #fe6d15f7;
-  --orange-alpha-10: #ff801f;
-  --orange-alpha-11: #ffa057;
-  --orange-alpha-12: #ffe0c2;
+  --orange-a1: #ec360007;
+  --orange-a2: #fe6d000e;
+  --orange-a3: #fb6a0025;
+  --orange-a4: #ff590039;
+  --orange-a5: #ff61004a;
+  --orange-a6: #fd75045c;
+  --orange-a7: #ff832c75;
+  --orange-a8: #fe84389d;
+  --orange-a9: #fe6d15f7;
+  --orange-a10: #ff801f;
+  --orange-a11: #ffa057;
+  --orange-a12: #ffe0c2;
+  --orange-surface: #271d1380;
+
+  /* Cores semânticas: o mapeamento e o critério estão no `@theme inline`. */
+  --ui-background: var(--gray-1);
+  --ui-panel: var(--gray-2);
+  --ui-current-surface: var(--ui-background);
+  --ui-overlay: var(--black-a8);
+  --ui-focus-ring: var(--gray-12);
 }
 
 /**