@aurea-uds/core 0.25.0 → 0.27.0

package/dist/aurea.css

@@ -130,53 +130,53 @@
   --tracking-widest:0.12em;
 }
 [data-theme="dark"]{
-  --background:oklch(0.145 0 0);
-  --foreground:oklch(0.985 0 0);
-  --card:oklch(0.205 0 0);
-  --card-foreground:oklch(0.985 0 0);
-  --popover:oklch(0.205 0 0);
-  --popover-foreground:oklch(0.985 0 0);
+  --background:#1f1f1f;
+  --foreground:#ffffff;
+  --card:#292929;
+  --card-foreground:#ffffff;
+  --popover:#292929;
+  --popover-foreground:#ffffff;
   --primary:var(--brand-yellow);
   --primary-foreground:var(--brand-yellow-foreground);
   --link:var(--brand-yellow);
   --link-hover:var(--brand-yellow);
-  --secondary:oklch(0.274 0.006 286.033);
-  --secondary-foreground:oklch(0.985 0 0);
-  --muted:oklch(0.269 0 0);
-  --muted-foreground:oklch(0.708 0 0);
-  --accent:oklch(0.269 0 0);
-  --accent-foreground:oklch(0.985 0 0);
-  --destructive:oklch(0.704 0.191 22.216);
-  --destructive-foreground:oklch(0.2 0.02 22);
-  --border:oklch(1 0 0 / 0.1);
-  --input:oklch(1 0 0 / 0.15);
-  --ring:oklch(0.556 0 0);
+  --secondary:#333333;
+  --secondary-foreground:#ffffff;
+  --muted:#333333;
+  --muted-foreground:#adadad;
+  --accent:#333333;
+  --accent-foreground:#ffffff;
+  --destructive:#c50f1f;
+  --destructive-foreground:#ffffff;
+  --border:#525252;
+  --input:#525252;
+  --ring:#666666;
   --chart-1:oklch(0.809 0.105 251.813);
   --chart-2:oklch(0.623 0.214 259.815);
   --chart-3:oklch(0.546 0.245 262.881);
   --chart-4:oklch(0.488 0.243 264.376);
   --chart-5:oklch(0.424 0.199 265.638);
-  --sidebar:oklch(0.205 0 0);
-  --sidebar-foreground:oklch(0.985 0 0);
+  --sidebar:#292929;
+  --sidebar-foreground:#ffffff;
   --sidebar-primary:var(--brand-yellow);
   --sidebar-primary-foreground:var(--brand-yellow-foreground);
-  --sidebar-accent:oklch(0.269 0 0);
-  --sidebar-accent-foreground:oklch(0.985 0 0);
-  --sidebar-border:oklch(1 0 0 / 0.1);
-  --sidebar-ring:oklch(0.556 0 0);
+  --sidebar-accent:#333333;
+  --sidebar-accent-foreground:#ffffff;
+  --sidebar-border:#525252;
+  --sidebar-ring:#666666;
   --surface-1:var(--card);
   --surface-2:var(--secondary);
   --surface-3:var(--muted);
-  --surface-inset:oklch(0.145 0 0);
-  --surface-hover:oklch(0.3 0 0);
+  --surface-inset:#141414;
+  --surface-hover:#383838;
   --foreground-strong:var(--foreground);
-  --subtle-foreground:oklch(0.76 0 0);
-  --border-strong:oklch(0.58 0 0);
+  --subtle-foreground:#adadad;
+  --border-strong:#adadad;
   --field-bg:var(--muted);
-  --overlay:oklch(0 0 0 / 0.74);
+  --overlay:oklch(0 0 0 / 0.5);
   --primary-hover:oklch(0.835 0.19 89);
   --primary-active:oklch(0.74 0.17 84);
-  --secondary-hover:oklch(0.31 0.006 286.033);
+  --secondary-hover:#3d3d3d;
   --segment:oklch(0.3964 0.01 285.93);
   --focus:var(--primary);
   --focus-strong:var(--primary);
@@ -185,66 +185,85 @@
   --control-selected:var(--primary);
   --control-selected-foreground:var(--primary-foreground);
   --selection:oklch(0.795 0.184 86.047 / 0.22);
-  --success-bg:oklch(0.42 0.11 150 / 0.36);
-  --warning-bg:oklch(0.34 0.08 60 / 0.64);
-  --danger-bg:oklch(0.32 0.1 22 / 0.62);
-  --info-bg:oklch(0.29 0.08 260 / 0.62);
-  --warning-400:var(--warning);
-  --success:#42d392;
-  --success-foreground:oklch(0.2 0.02 160);
-  --success-hover:oklch(0.83 0.145 160);
-  --info:#8ec5ff;
-  --info-foreground:oklch(0.2 0.02 250);
-  --info-hover:oklch(0.86 0.075 250);
-  --warning:oklch(0.72 0.175 60);
-  --warning-foreground:oklch(0.2 0.02 60);
-  --warning-hover:oklch(0.78 0.16 60);
+  --success-bg:#052505;
+  --warning-bg:#4a1e04;
+  --danger-bg:#3b0509;
+  --info-bg:#002440;
+  --category-red:oklch(0.85 0.08 25);
+  --category-red-bg:oklch(0.28 0.07 25 / 0.62);
+  --category-orange:oklch(0.76 0.13 55);
+  --category-orange-bg:oklch(0.36 0.089 55 / 0.62);
+  --category-green:oklch(0.85 0.13 150);
+  --category-green-bg:oklch(0.28 0.07 150 / 0.62);
+  --category-teal:oklch(0.76 0.13 180);
+  --category-teal-bg:oklch(0.36 0.065 180 / 0.62);
+  --category-cyan:oklch(0.85 0.098 225);
+  --category-cyan-bg:oklch(0.28 0.053 225 / 0.62);
+  --category-blue:oklch(0.76 0.121 260);
+  --category-blue-bg:oklch(0.36 0.09 260 / 0.62);
+  --category-violet:oklch(0.85 0.086 300);
+  --category-violet-bg:oklch(0.28 0.07 300 / 0.62);
+  --category-pink:oklch(0.76 0.13 350);
+  --category-pink-bg:oklch(0.36 0.09 350 / 0.62);
+  --warning-400:#faa06b;
+  --success-400:#54b054;
+  --danger-400:#eeacb2;
+  --info-400:#5caae5;
+  --success:#107c10;
+  --success-foreground:#ffffff;
+  --success-hover:#0e700e;
+  --info:#0078d4;
+  --info-foreground:#ffffff;
+  --info-hover:#006cbf;
+  --warning:#f7630c;
+  --warning-foreground:#242424;
+  --warning-hover:#de590b;
 }
 [data-theme="light"]{
-  --background:oklch(0.965 0 0);
-  --foreground:oklch(0.145 0 0);
-  --card:oklch(1 0 0);
-  --card-foreground:oklch(0.145 0 0);
-  --popover:oklch(1 0 0);
-  --popover-foreground:oklch(0.145 0 0);
+  --background:#f5f5f5;
+  --foreground:#242424;
+  --card:#ffffff;
+  --card-foreground:#242424;
+  --popover:#ffffff;
+  --popover-foreground:#242424;
   --primary:var(--brand-yellow);
   --primary-foreground:var(--brand-yellow-foreground);
   --link:oklch(0.52 0.106 86.047);
   --link-hover:oklch(0.44 0.106 86.047);
-  --secondary:oklch(0.94 0 0);
-  --secondary-foreground:oklch(0.21 0.006 285.885);
+  --secondary:#ebebeb;
+  --secondary-foreground:#242424;
   --muted:var(--secondary);
-  --muted-foreground:oklch(0.43 0 0);
+  --muted-foreground:#616161;
   --accent:var(--secondary);
-  --accent-foreground:oklch(0.205 0 0);
-  --destructive:oklch(0.577 0.245 27.325);
-  --destructive-foreground:oklch(0.985 0 0);
-  --border:oklch(0.89 0 0);
-  --input:oklch(0.922 0 0);
-  --ring:oklch(0.708 0 0);
+  --accent-foreground:#242424;
+  --destructive:#c50f1f;
+  --destructive-foreground:#ffffff;
+  --border:#e0e0e0;
+  --input:#e0e0e0;
+  --ring:#d1d1d1;
   --chart-1:oklch(0.809 0.105 251.813);
   --chart-2:oklch(0.623 0.214 259.815);
   --chart-3:oklch(0.546 0.245 262.881);
   --chart-4:oklch(0.488 0.243 264.376);
   --chart-5:oklch(0.424 0.199 265.638);
   --sidebar:var(--card);
-  --sidebar-foreground:oklch(0.145 0 0);
+  --sidebar-foreground:#242424;
   --sidebar-primary:var(--primary-emphasis);
   --sidebar-primary-foreground:var(--brand-yellow-foreground);
   --sidebar-accent:var(--secondary);
-  --sidebar-accent-foreground:oklch(0.205 0 0);
-  --sidebar-border:oklch(0.89 0 0);
-  --sidebar-ring:oklch(0.708 0 0);
+  --sidebar-accent-foreground:#242424;
+  --sidebar-border:#e0e0e0;
+  --sidebar-ring:#d1d1d1;
   --surface-1:var(--card);
   --surface-2:var(--secondary);
   --surface-3:var(--muted);
-  --surface-inset:oklch(0.955 0 0);
-  --surface-hover:oklch(0.925 0 0);
+  --surface-inset:#f0f0f0;
+  --surface-hover:#e6e6e6;
   --foreground-strong:var(--foreground);
-  --subtle-foreground:oklch(0.43 0 0);
-  --border-strong:oklch(0.56 0 0);
+  --subtle-foreground:#616161;
+  --border-strong:#616161;
   --field-bg:var(--muted);
-  --overlay:oklch(0.145 0 0 / 0.4);
+  --overlay:oklch(0 0 0 / 0.4);
   --primary-hover:oklch(0.835 0.19 89);
   --primary-active:oklch(0.74 0.17 84);
   --secondary-hover:var(--surface-hover);
@@ -255,26 +274,42 @@
   --primary-outline:var(--brand-yellow-text);
   --control-selected:var(--brand-yellow-foreground);
   --control-selected-foreground:oklch(0.985 0 0);
-  --success-400:var(--success);
-  --warning-400:var(--warning);
-  --danger-400:#9f2330;
-  --info-400:var(--info);
+  --success-400:#0e700e;
+  --warning-400:#8a3707;
+  --danger-400:#b10e1c;
+  --info-400:#006cbf;
   --oracle-300:var(--chart-4);
   --oracle-400:var(--chart-4);
   --selection:oklch(0.795 0.184 86.047 / 0.18);
-  --success-bg:oklch(0.94 0.05 150);
-  --warning-bg:oklch(0.95 0.06 61);
-  --danger-bg:oklch(0.95 0.05 22);
-  --info-bg:oklch(0.95 0.045 260);
-  --success:#0f6b3e;
-  --success-foreground:oklch(0.985 0 0);
-  --success-hover:oklch(0.4 0.1 155);
-  --info:#164f9d;
-  --info-foreground:oklch(0.985 0 0);
-  --info-hover:oklch(0.38 0.13 258);
-  --warning:oklch(0.525 0.131 61);
-  --warning-foreground:oklch(0.985 0 0);
-  --warning-hover:oklch(0.47 0.115 61);
+  --success-bg:#f1faf1;
+  --warning-bg:#fff9f5;
+  --danger-bg:#fdf3f4;
+  --info-bg:#f3f9fd;
+  --category-red:oklch(0.52 0.15 25);
+  --category-red-bg:oklch(0.96 0.019 25);
+  --category-orange:oklch(0.47 0.115 55);
+  --category-orange-bg:oklch(0.925 0.044 55);
+  --category-green:oklch(0.52 0.141 150);
+  --category-green-bg:oklch(0.96 0.035 150);
+  --category-teal:oklch(0.47 0.084 180);
+  --category-teal-bg:oklch(0.925 0.055 180);
+  --category-cyan:oklch(0.52 0.097 225);
+  --category-cyan-bg:oklch(0.96 0.025 225);
+  --category-blue:oklch(0.47 0.15 260);
+  --category-blue-bg:oklch(0.925 0.035 260);
+  --category-violet:oklch(0.52 0.15 300);
+  --category-violet-bg:oklch(0.96 0.022 300);
+  --category-pink:oklch(0.47 0.15 350);
+  --category-pink-bg:oklch(0.925 0.044 350);
+  --success:#107c10;
+  --success-foreground:#ffffff;
+  --success-hover:#0e700e;
+  --info:#0078d4;
+  --info-foreground:#ffffff;
+  --info-hover:#006cbf;
+  --warning:#f7630c;
+  --warning-foreground:#242424;
+  --warning-hover:#de590b;
 }
 [data-brand="lory"][data-theme="dark"]{
   --background:oklch(0.16 0.018 250);
@@ -817,7 +852,9 @@ img,svg { display:block; }
 /* O rótulo de grupo também sai da escala da LATERAL, pelo mesmo motivo: `--subtle-foreground` é
    apagado contra a página, e contra um painel escuro num tema claro ele some. Derivado do próprio
    `--sidebar-foreground` em vez de token novo — a lateral não publica um "muted" dela. */
-.sidebar-group-label { margin:var(--space-3) var(--space-3) var(--space-1); color:color-mix(in oklab, var(--sidebar-foreground) 62%, transparent); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+/* 72% e não 62% desde a 0.27.0 (ADR-0061): com a letra da paleta nova (#242424, menos preta) os 62%
+   davam 4,4:1 sobre o branco — o axe pegou na varredura. 72% é o cinza de texto apagado da paleta. */
+.sidebar-group-label { margin:var(--space-3) var(--space-3) var(--space-1); color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
 .sidebar-sub { padding-inline-start:var(--space-5); }
 /* RECOLHIDA — a lateral vira trilho de ícones. O rótulo NÃO some do DOM: o React troca a
    classe dele por `.sr-only`, então quem usa leitor de tela continua ouvindo o nome. Ícone
@@ -1259,11 +1296,11 @@ img,svg { display:block; }
 .btn-primary-outline:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
 .btn-primary-ghost { --btn-bg:transparent; --btn-fg:var(--primary); --btn-border:transparent; }
 .btn-primary-ghost:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
-.btn-danger-outline { --btn-bg:transparent; --btn-fg:var(--destructive); --btn-border:var(--destructive); }
+.btn-danger-outline { --btn-bg:transparent; --btn-fg:var(--danger-400); --btn-border:var(--danger-400); }
 .btn-danger-outline:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
-.btn-danger-ghost { --btn-bg:transparent; --btn-fg:var(--destructive); --btn-border:transparent; }
+.btn-danger-ghost { --btn-bg:transparent; --btn-fg:var(--danger-400); --btn-border:transparent; }
 .btn-danger-ghost:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
-[data-theme="light"] .btn-danger-outline:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-danger-ghost:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-link-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--destructive) 62%, var(--foreground)); }
+[data-theme="light"] .btn-danger-outline:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-danger-ghost:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-link-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:var(--danger-400); }
 /* A MESMA correção para a marca, que estava faltando. Medido em 21/08/2026 na varredura de AA
    da matriz de tom: `.btn-primary-outline` e `.btn-primary-ghost` pintavam o rótulo com
    `--primary` cru, e no tema claro isso dá **1.73:1** — reprovação grave, em componente
@@ -1283,7 +1320,7 @@ img,svg { display:block; }
 .btn-link:hover:not(:disabled):not([aria-disabled="true"]) { text-decoration-thickness:2px; }
 .btn-link-primary { --btn-fg:var(--primary); }
 [data-theme="light"] .btn-link-primary:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
-.btn-link-danger { --btn-fg:var(--destructive); }
+.btn-link-danger { --btn-fg:var(--danger-400); }
 /* pressed entra na linguagem única de "selecionado" acima; só-ícone não leva o fio. */
 /* Kbd — a tecla que dispara a ação, dentro ou fora do botão. Peça própria, não decoração. */
 .kbd { display:inline-flex; align-items:center; justify-content:center; gap:2px; min-width:20px; height:20px; padding:0 6px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--secondary); color:var(--muted-foreground); font:500 11px/1 var(--font-code); }
@@ -1326,24 +1363,26 @@ img,svg { display:block; }
 .btn-solid.btn-tone-info:hover:not(:disabled) { --btn-bg:var(--info-hover); --btn-fg:var(--info-foreground); }
 .btn-solid.btn-tone-warning { --btn-bg:var(--warning); --btn-fg:var(--warning-foreground); --btn-border:transparent; }
 .btn-solid.btn-tone-warning:hover:not(:disabled) { --btn-bg:var(--warning-hover); --btn-fg:var(--warning-foreground); }
-/* e o mesmo tom SEM caixa: contorno, fantasma, link e navegação. O token de tom já é
-   "esta cor, legível contra a superfície DESTE tema", então não há correção por tema aqui. */
+/* e o mesmo tom SEM caixa: contorno, fantasma, link e navegação. ⚠ Desde a 0.27.0 (ADR-0061) o
+   token de tom (`--success`) é o FUNDO cheio — a mesma cor funda nos dois temas —, e não serve
+   de letra no escuro. Letra, ícone, borda e barra sobre a superfície usam o par de letra
+   (`--success-400`, `--info-400`, `--warning-400`, `--danger-400`), que cada tema ajusta. */
 .btn-tone-brand,.btn-tone-brand:hover:not(:disabled) { --btn-fg:var(--primary); }
 [data-theme="light"] .btn-tone-brand:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-tone-brand:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 .btn-outline.btn-tone-brand { --btn-border:var(--primary); }
 .btn-tone-brand:not(.btn-link):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
-.btn-tone-danger,.btn-tone-danger:hover:not(:disabled) { --btn-fg:var(--destructive); }
-[data-theme="light"] .btn-tone-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-tone-danger:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--destructive) 62%, var(--foreground)); }
-.btn-outline.btn-tone-danger { --btn-border:var(--destructive); }
+.btn-tone-danger,.btn-tone-danger:hover:not(:disabled) { --btn-fg:var(--danger-400); }
+[data-theme="light"] .btn-tone-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-tone-danger:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:var(--danger-400); }
+.btn-outline.btn-tone-danger { --btn-border:var(--danger-400); }
 .btn-tone-danger:not(.btn-link):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
-.btn-tone-success,.btn-tone-success:hover:not(:disabled) { --btn-fg:var(--success); }
-.btn-outline.btn-tone-success { --btn-border:var(--success); }
+.btn-tone-success,.btn-tone-success:hover:not(:disabled) { --btn-fg:var(--success-400); }
+.btn-outline.btn-tone-success { --btn-border:var(--success-400); }
 .btn-tone-success:not(.btn-link):not(.btn-solid):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--success) 14%, transparent); }
-.btn-tone-info,.btn-tone-info:hover:not(:disabled) { --btn-fg:var(--info); }
-.btn-outline.btn-tone-info { --btn-border:var(--info); }
+.btn-tone-info,.btn-tone-info:hover:not(:disabled) { --btn-fg:var(--info-400); }
+.btn-outline.btn-tone-info { --btn-border:var(--info-400); }
 .btn-tone-info:not(.btn-link):not(.btn-solid):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--info) 14%, transparent); }
-.btn-tone-warning,.btn-tone-warning:hover:not(:disabled) { --btn-fg:var(--warning); }
-.btn-outline.btn-tone-warning { --btn-border:var(--warning); }
+.btn-tone-warning,.btn-tone-warning:hover:not(:disabled) { --btn-fg:var(--warning-400); }
+.btn-outline.btn-tone-warning { --btn-border:var(--warning-400); }
 .btn-tone-warning:not(.btn-link):not(.btn-solid):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--warning) 14%, transparent); }
 .btn-nav:hover:not(:disabled):not([aria-disabled="true"]) { --btn-fg:var(--foreground); }
 /* O botão só de ícone é REDONDO, em todos os tamanhos — decisão do Victor, 25/09/2026
@@ -1795,10 +1834,22 @@ img,svg { display:block; }
    o contador cai sobre a cor da marca e precisa da mesma inversão do botão primário. Os outros
    seis deixam o contador sobre a superfície da barra, onde ele já se lê. */
 
-.badge-success { --badge-accent:var(--success-400); color:var(--success-400); background:var(--success-bg); border-color:color-mix(in srgb,var(--success-400) 35%,var(--border)); }
-.badge-warning { --badge-accent:var(--warning-400); color:var(--warning-400); background:var(--warning-bg); border-color:color-mix(in srgb,var(--warning-400) 35%,var(--border)); }
-.badge-danger { --badge-accent:var(--danger-400); color:var(--danger-400); background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger-400) 35%,var(--border)); }
-.badge-info,.badge-running { --badge-accent:var(--info-400); color:var(--info-400); background:var(--info-bg); border-color:color-mix(in srgb,var(--info-400) 35%,var(--border)); }
+.badge-success { --badge-accent:var(--success-400); --badge-fill:var(--success); --badge-on:var(--success-foreground); color:var(--success-400); background:var(--success-bg); border-color:color-mix(in srgb,var(--success-400) 35%,var(--border)); }
+.badge-warning { --badge-accent:var(--warning-400); --badge-fill:var(--warning); --badge-on:var(--warning-foreground); color:var(--warning-400); background:var(--warning-bg); border-color:color-mix(in srgb,var(--warning-400) 35%,var(--border)); }
+.badge-danger { --badge-accent:var(--danger-400); --badge-fill:var(--destructive); --badge-on:var(--destructive-foreground); color:var(--danger-400); background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger-400) 35%,var(--border)); }
+.badge-info,.badge-running { --badge-accent:var(--info-400); --badge-fill:var(--info); --badge-on:var(--info-foreground); color:var(--info-400); background:var(--info-bg); border-color:color-mix(in srgb,var(--info-400) 35%,var(--border)); }
+/* AS OITO CORES DE CATEGORIA (GAR-07, ADR-0060, 09/10/2026): marcam GRUPO, não estado — "Motos" e
+   "Carros" num site de notícias. Mesma receita dos quatro propósitos acima (acento, fundo suave e
+   o fio misturado com a borda), e por isso as três ênfases valem para elas sem regra nova. O
+   amarelo fica de fora: é da marca. Quem cobra o AA nos dois temas é o `badge-categoria.spec.ts`. */
+.badge-red { --badge-accent:var(--category-red); color:var(--category-red); background:var(--category-red-bg); border-color:color-mix(in srgb,var(--category-red) 35%,var(--border)); }
+.badge-orange { --badge-accent:var(--category-orange); color:var(--category-orange); background:var(--category-orange-bg); border-color:color-mix(in srgb,var(--category-orange) 35%,var(--border)); }
+.badge-green { --badge-accent:var(--category-green); color:var(--category-green); background:var(--category-green-bg); border-color:color-mix(in srgb,var(--category-green) 35%,var(--border)); }
+.badge-teal { --badge-accent:var(--category-teal); color:var(--category-teal); background:var(--category-teal-bg); border-color:color-mix(in srgb,var(--category-teal) 35%,var(--border)); }
+.badge-cyan { --badge-accent:var(--category-cyan); color:var(--category-cyan); background:var(--category-cyan-bg); border-color:color-mix(in srgb,var(--category-cyan) 35%,var(--border)); }
+.badge-blue { --badge-accent:var(--category-blue); color:var(--category-blue); background:var(--category-blue-bg); border-color:color-mix(in srgb,var(--category-blue) 35%,var(--border)); }
+.badge-violet { --badge-accent:var(--category-violet); color:var(--category-violet); background:var(--category-violet-bg); border-color:color-mix(in srgb,var(--category-violet) 35%,var(--border)); }
+.badge-pink { --badge-accent:var(--category-pink); color:var(--category-pink); background:var(--category-pink-bg); border-color:color-mix(in srgb,var(--category-pink) 35%,var(--border)); }
 /* ── AS TRÊS ÊNFASES — e elas vêm DEPOIS das variantes de propósito ─────────────────
    Cada variante declara só o ACENTO; as ênfases saem dele. Antes cada variante escrevia
    cor + fundo + borda na mão, e uma ênfase nova custaria seis regras novas.
@@ -1808,7 +1859,10 @@ img,svg { display:block; }
    número do `soft`. É a mesma armadilha que o `.banner` e o `.data-list` já pagaram aqui.
    `--background` como texto do sólido serve aos DOIS temas porque o acento já vira com o
    tema: `--success-400` é verde CLARO no escuro e verde ESCURO no claro. */
-.badge-solid { background:var(--badge-accent); color:var(--background); border-color:transparent; }
+/* O selo CHEIO de estado é o botão cheio do mesmo tom (ADR-0061): a mesma cor funda e a mesma letra
+   (`--badge-fill`/`--badge-on`). Quem não declara o par (as categorias, a marca, o neutro) segue
+   enchendo com o acento, como antes. */
+.badge-solid { background:var(--badge-fill, var(--badge-accent)); color:var(--badge-on, var(--background)); border-color:transparent; }
 .badge-outline { background:transparent; color:var(--badge-accent); border-color:var(--badge-accent); }
 .status-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent); }
 /* Status: condição operacional (DIRECTION §3.6) — NÃO é o pill do Badge; é ponto + rótulo
@@ -1817,10 +1871,10 @@ img,svg { display:block; }
    nomes operacionais e os semânticos apontam pro mesmo par de tokens de propósito. */
 .status { display:inline-flex; align-items:center; gap:var(--space-2); color:var(--muted-foreground); font-size:var(--text-sm); }
 .status-label { color:var(--foreground); }
-.status-online,.status-success { color:var(--success); }
-.status-away,.status-warning { color:var(--warning); }
+.status-online,.status-success { color:var(--success-400); }
+.status-away,.status-warning { color:var(--warning-400); }
 .status-busy,.status-danger { color:var(--danger-400); }
-.status-running,.status-info { color:var(--info); }
+.status-running,.status-info { color:var(--info-400); }
 /* offline é o único que NÃO é "mais uma cor": --subtle-foreground e --muted-foreground
    colapsam no MESMO valor no tema claro, então offline sairia idêntico ao neutral. Ponto
    VAZADO resolve nos dois temas e ainda diz a coisa certa (ausência, não outro estado).
@@ -1881,7 +1935,7 @@ img,svg { display:block; }
 .alert h4,.alert strong { display:block; margin:0 0 2px; font-size:var(--text-sm); } .alert p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
 /* A cor do glifo é a da variante, senão o ícone vira enfeite cinza e não repete o sinal.
    Só o ícone DIRETO do alerta: um ícone dentro do corpo (num botão, num link) é do corpo. */
-.alert>.icon { color:var(--info); } .alert-success>.icon { color:var(--success); } .alert-warning>.icon { color:var(--warning); } .alert-danger>.icon { color:var(--danger-400); }
+.alert>.icon { color:var(--info-400); } .alert-success>.icon { color:var(--success-400); } .alert-warning>.icon { color:var(--warning-400); } .alert-danger>.icon { color:var(--danger-400); }
 .banner strong { font-size:var(--text-sm); } .banner p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
 @media (max-width:640px) { .banner { grid-template-columns:auto minmax(0,1fr); } .banner>:last-child { grid-column:2; justify-self:start; } }
 .progress { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-3); }
@@ -1893,10 +1947,10 @@ img,svg { display:block; }
 .progress-field { display:grid; gap:var(--space-1); }
 .progress-detail { justify-self:end; color:var(--muted-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; }
 .progress-tone-neutral>span { background:var(--muted-foreground); }
-.progress-tone-success>span { background:var(--success); }
-.progress-tone-warning>span { background:var(--warning); }
-.progress-tone-danger>span { background:var(--destructive); }
-.progress-tone-info>span { background:var(--info); }
+.progress-tone-success>span { background:var(--success-400); }
+.progress-tone-warning>span { background:var(--warning-400); }
+.progress-tone-danger>span { background:var(--danger-400); }
+.progress-tone-info>span { background:var(--info-400); }
 /* Sem total, um pedaço de 2/5 corre pelo trilho: os números da referência (a largura de 2/5, de -100% a 350%
    da própria largura, 1,5 s, a curva dela). A referência anda com `translateX`; aqui anda a MARGEM LÓGICA
    (de -40% a 140% do trilho, o mesmo percurso), para correr ao contrário na escrita da direita para
@@ -2047,13 +2101,27 @@ img,svg { display:block; }
 /* O "+N" é um avatar como os outros — mesma caixa, mesma borda —, só que menor por dentro e sem
    peso de nome próprio: ele conta, não identifica. */
 .avatar-count { background:var(--secondary); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); }
-.kpi { display:flex; flex-direction:column; gap:5px; }
+.kpi { display:flex; flex-direction:column; gap:var(--space-1); }
 /* O NÚMERO do KPI (08/10/2026, pedido de um consumidor com baixa visão): a ficha sempre prometeu
    `--text-3xl`, e o CSS nunca aplicou — medido no navegador, o valor saía com 14, igual ao rótulo,
    e a tendência com 11,7 (o `small` do navegador encolhe a letra). O número é a razão do
    componente; os algarismos ficam tabulares para não dançar quando o valor muda. */
 .kpi > strong { font-size:var(--text-3xl); line-height:var(--leading-tight); font-variant-numeric:tabular-nums; }
 .kpi > small { font-size:var(--text-sm); }
+/* A TENDÊNCIA COM DIREÇÃO (GAR-09, ADR-0060, 09/10/2026): seta, palavra para o leitor de tela e cor,
+   nunca a cor sozinha. A seta é o `trend-up`/`trend-down`/`minus` do Phosphor (o mesmo desenho do
+   sprite), por máscara — o KPI é marcação pura e o `Icon` precisa de hook; o menu do `Header` já
+   faz assim. A cor é a do texto do selo de cada estado, que já passa AA nos dois temas. */
+/* A seta fica na PRIMEIRA linha: com `center`, uma tendência que quebra em duas linhas deixava a
+   seta solta entre elas (visto na bancada, 09/10/2026). `1lh` é a altura da linha do próprio texto. */
+.kpi-trend { display:inline-flex; align-items:flex-start; gap:var(--space-1); }
+.kpi-trend-icon { flex:none; inline-size:var(--icon-sm); block-size:var(--icon-sm); margin-block-start:calc((1lh - var(--icon-sm)) / 2); background:currentColor; -webkit-mask:var(--kpi-glifo) center/contain no-repeat; mask:var(--kpi-glifo) center/contain no-repeat; }
+.kpi-trend-up { --kpi-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,56v64a8,8,0,0,1-16,0V75.31l-82.34,82.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,212.69,64H168a8,8,0,0,1,0-16h64A8,8,0,0,1,240,56Z'/%3E%3C/svg%3E"); }
+.kpi-trend-down { --kpi-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,128v64a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h44.69L136,107.31l-34.34,34.35a8,8,0,0,1-11.32,0l-72-72A8,8,0,0,1,29.66,58.34L96,124.69l34.34-34.35a8,8,0,0,1,11.32,0L224,172.69V128a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E"); }
+.kpi-trend-flat { --kpi-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E"); }
+.kpi-tone-success { color:var(--success-400); }
+.kpi-tone-danger { color:var(--danger-400); }
+.kpi-tone-neutral { color:var(--muted-foreground); }
 /* DataList: chave/valor em duas colunas. O termo é secundário — mesmo idioma do cabeçalho de
    tabela. Sem a regra (achado A13) o <dl> saía cru: dt e dd empilhados, com o recuo de 40px
    que o navegador dá ao <dd>. */
@@ -2161,7 +2229,7 @@ img,svg { display:block; }
    log e a cor primária da Aurea são duas intenções, e ficavam indistinguíveis. `text-transform`
    porque o React passa o valor em minúsculas (é ele que casa a regra) e o nível tem de LER como
    nível. */
-.log-line { display:grid; grid-template-columns:86px 72px minmax(0,1fr); gap:12px; padding:3px 0; } .log-time { color:var(--subtle-foreground); } .log-level { color:var(--primary); text-transform:uppercase; } .log-level.info { color:var(--info); } .log-level.warn { color:var(--warning); } .log-level.error { color:var(--danger-400); }
+.log-line { display:grid; grid-template-columns:86px 72px minmax(0,1fr); gap:12px; padding:3px 0; } .log-time { color:var(--subtle-foreground); } .log-level { color:var(--primary); text-transform:uppercase; } .log-level.info { color:var(--info-400); } .log-level.warn { color:var(--warning-400); } .log-level.error { color:var(--danger-400); }
 
 /* ========================================================================== */
 /* 05. GRÁFICOS E VISUALIZAÇÃO                                                 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/core",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "O CSS da Aurea UDS e o comportamento em JavaScript puro. Importe @aurea-uds/fonts/css antes deste.",
   "keywords": [
     "aurea",