@softize/opus 22.2.0 → 24.0.0

package/src/ui/react.tsx

@@ -10,6 +10,9 @@ export * from "./drivers/react.tsx";
 // Utilitário
 export { cn } from "./lib/cn.ts";
 
+// Personalização de aparência (ADR 0044): o mesmo módulo sem React de `./ui/appearance`.
+export * from "./appearance.ts";
+
 // Primitivos
 export { Button, buttonVariants } from "./components/primitives/button.tsx";
 export type {
@@ -90,18 +93,6 @@ export type {
   DetailGroupVariant,
 } from "./components/primitives/detail.tsx";
 
-export {
-  Card,
-  CardHeader,
-  CardMedia,
-  CardTitle,
-  CardDescription,
-  CardAction,
-  CardBody,
-  CardContent,
-  CardFooter,
-} from "./components/primitives/card.tsx";
-
 export { MetricCard } from "./components/primitives/metric-card.tsx";
 export type {
   MetricCardProps,
@@ -136,6 +127,8 @@ export {
   DialogNavigation,
   DialogMedia,
   DialogActions,
+  DialogIntro,
+  DialogIntroActions,
   DialogBody,
   DialogFooter,
   DialogTitle,
@@ -146,7 +139,7 @@ export type {
   DialogMode,
 } from "./components/primitives/dialog.tsx";
 
-// O pacote de anatomia que Card, Dialog, Drawer e Pane declaram no root (ADR 0023). As
+// O pacote de anatomia que Surface, Dialog, Drawer e Pane declaram no root (ADR 0023). As
 // tabelas e o contexto continuam internos; o consumidor escolhe entre os dois nomes.
 export type { SurfaceLayout } from "./components/patterns/surface-anatomy.ts";
 
@@ -192,8 +185,8 @@ export { Separator } from "./components/primitives/separator.tsx";
 export {
   Tabs,
   TabsList,
-  TabsTrigger,
-  TabsContent,
+  TabsListItem,
+  TabsPanel,
 } from "./components/primitives/tabs.tsx";
 
 export { Skeleton } from "./components/primitives/skeleton.tsx";
@@ -278,6 +271,8 @@ export {
 export {
   Drawer,
   DrawerActions,
+  DrawerIntro,
+  DrawerIntroActions,
   DrawerClose,
   DrawerContent,
   DrawerFooter,
@@ -372,10 +367,16 @@ export {
 export { ScrollArea, ScrollBar } from "./components/primitives/scroll-area.tsx";
 export { Slider } from "./components/primitives/slider.tsx";
 export { Switch } from "./components/primitives/switch.tsx";
-export { Toggle, toggleVariants } from "./components/primitives/toggle.tsx";
+export {
+  Toggle,
+  type ToggleProps,
+  toggleVariants,
+} from "./components/primitives/toggle.tsx";
 export {
   ToggleGroup,
-  ToggleGroupItem,
+  type ToggleGroupDistribution,
+  type ToggleGroupMode,
+  type ToggleGroupProps,
 } from "./components/primitives/toggle-group.tsx";
 export { Truncate } from "./components/primitives/truncate.tsx";
 export type { TruncateProps } from "./components/primitives/truncate.tsx";
@@ -482,27 +483,30 @@ export type {
   PageStateStatus,
 } from "./components/patterns/page-state.tsx";
 
-// Região de conteúdo composta; shorthand e slots explícitos compartilham a mesma anatomia.
-export {
-  Content,
-  ContentHeader,
-  ContentMedia,
-  ContentTitle,
-  ContentDescription,
-  ContentMeta,
-  ContentActions,
-  ContentBody,
-} from "./components/patterns/content-header.tsx";
+// Superfície: região de página, grupo de campos, entidade, item ou bloco clicável. A
+// semântica vem de `as`/`asChild`; forma curta e slots compartilham a anatomia (ADR 0045).
+export {
+  Surface,
+  SurfaceHeader,
+  SurfaceMedia,
+  SurfaceTitle,
+  SurfaceDescription,
+  SurfaceMeta,
+  SurfaceActions,
+  SurfaceBody,
+  SurfaceFooter,
+} from "./components/patterns/surface.tsx";
 export type {
-  ContentProps,
-  ContentHeaderProps,
-  ContentElement,
-  ContentFrameVariant,
-  ContentHeaderLevel,
-  ContentHeaderVariant,
-} from "./components/patterns/content-header.tsx";
-
-// Layout composicional: Split decide a relação espacial; Pane carrega conteúdo com inset.
+  SurfaceProps,
+  SurfaceHeaderProps,
+  SurfaceMediaProps,
+  SurfaceBodyProps,
+  SurfaceElement,
+  SurfaceElevation,
+} from "./components/patterns/surface.tsx";
+export type { HeadingLevel } from "./components/patterns/heading-level.ts";
+
+// Layout composicional: Split decide a relação espacial; Pane declara somente dimensão.
 export { Split, Pane } from "./components/patterns/split.tsx";
 export type {
   SplitProps,
@@ -530,16 +534,8 @@ export type {
   SurfaceStatusContext,
 } from "./components/patterns/dock.tsx";
 
-// Barra lateral composicional: header/conteúdo/footer e navegação, sem possuir o layout.
+// Barra lateral composicional e navegação, sem possuir o layout.
 export {
-  PaneActions,
-  PaneDescription,
-  PaneHeader,
-  PaneMedia,
-  PaneTitle,
-  PaneBody,
-  PaneContent,
-  PaneFooter,
   Sidebar,
   SidebarItem,
   SidebarGroupLabel,

package/src/ui/theme.css

@@ -6,10 +6,11 @@
  *
  * ── DIVERGÊNCIAS DECLARADAS vs shadcn upstream (regra: o que não está aqui é DRIFT
  *    e deve ser sincronizado; ver skill `build-opus-ui`) ─────────────────────────────
- * 1. Formato HSL nos tokens (upstream migrou pra oklch) — legibilidade/ferramentas
- *    nossas; os VALORES acompanham o upstream, só o formato difere.
- * 2. Elevação dark: --card/--popover ACIMA de --background (10% vs 3.9%) — identidade
- *    da casa (upstream v4 também elevou; calibramos pelo site deles em 2026-06).
+ * 1. Formato HSL nos tokens (upstream migrou pra oklch) — legibilidade/ferramentas nossas.
+ * 2. Hierarquia de superfície nos dois temas: canvas, superfície elevada, controle e estados
+ *    neutros têm valores opacos por papel (ADR 0043), sem depender do fundo ancestral. A escala
+ *    neutra é derivada de quatro eixos de aparência por modo (ADR 0044); os presets reproduzem
+ *    os valores calibrados e o app personaliza por custom property.
  * 3. Radius mapeado (xs a 2xl em @theme inline) preservando o sentido pré-v4 dos
  *    utilitários `rounded-*` — neutraliza o rename do v4 e mantém a escala monotônica.
  * 4. Escala shadow-* recomposta diretamente em duas camadas claras, difusas e com spread
@@ -18,10 +19,10 @@
  *    canvas quase-branco; superfícies elevadas usam a mesma borda real dos demais papéis.
  * 6. Radius base em 0.75rem — identidade mais arredondada; os componentes continuam usando
  *    diretamente a escala Tailwind, sem tokens por papel (ver docs/radius-scale.md).
- * Tudo o mais (escala neutra, semânticas) segue o upstream.
+ * Tudo o mais (semânticas e contratos das primitives) segue o upstream.
  */
-@import 'tailwindcss';
-@import 'tw-animate-css';
+@import "tailwindcss";
+@import "tw-animate-css";
 @plugin '@tailwindcss/typography';
 
 /* dark por classe (v4 é CSS-first) */
@@ -31,20 +32,112 @@
   /* Scrollbars e controles NATIVOS (date picker, autofill…) seguem o tema — sem
      isto o browser assume light e pinta scrollbar branca no dark. */
   color-scheme: light;
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(0 0% 3.9%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 3.9%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 3.9%);
+
+  /* ── Aparência (ADR 0044) ──────────────────────────────────────────────────────────
+     Quatro eixos inteiros de 0 a 100, declarados por modo. Estes são os presets: com eles a
+     escala neutra abaixo reproduz exatamente os valores calibrados do tema. O consumidor
+     sobrescreve `--appearance-light-*` e `--appearance-dark-*` (inline em <html>, por exemplo)
+     e remove a propriedade para voltar ao preset; `@softize/opus/ui/appearance` publica nomes e
+     presets. `--neutral-hue` é identidade do app — o matiz que a intensidade aplica aos
+     neutros — e não um eixo. Primary e contextos semânticos não participam desta derivação.
+
+     Os limites protegem o tema calibrado. Contraste e contraste entre camadas partem do preset
+     e só ampliam as separações. O brilho move as superfícies dentro de uma faixa em que o texto
+     secundário compensa a mudança. Nenhuma combinação de 0 a 100 fica abaixo do preset em
+     separação entre papéis nem em contraste do texto sobre as superfícies em repouso. */
+  --appearance-light-color-intensity: 0;
+  --appearance-light-contrast: 0;
+  --appearance-light-surface-brightness: 100;
+  --appearance-light-layer-contrast: 0;
+  --appearance-dark-color-intensity: 0;
+  --appearance-dark-contrast: 0;
+  --appearance-dark-surface-brightness: 50;
+  --appearance-dark-layer-contrast: 0;
+  --neutral-hue: 220;
+
+  /* Eixos ativos no modo claro. */
+  --appearance-color-intensity: var(--appearance-light-color-intensity);
+  --appearance-contrast: var(--appearance-light-contrast);
+  --appearance-surface-brightness: var(--appearance-light-surface-brightness);
+  --appearance-layer-contrast: var(--appearance-light-layer-contrast);
+
+  /* Escala neutra derivada (luminosidade em número, 0 a 100). No claro a superfície elevada
+     parte do branco; o canvas desce dela conforme o contraste entre camadas e o controle fica
+     entre os dois. Estados neutros, muted e bordas descem a partir do canvas — a superfície
+     mais escura — na direção do texto, em passos que o contraste amplia. O texto secundário
+     recebe só uma fração da saturação e escurece junto com as superfícies e com a intensidade,
+     para que nem o ajuste nem o matiz escolhido pelo app reduzam a leitura. */
+  --neutral-saturation: calc(var(--appearance-color-intensity) * 0.2%);
+  --neutral-text-saturation: calc(var(--appearance-color-intensity) * 0.08%);
+  --neutral-step: calc(1 + var(--appearance-contrast) * 0.01);
+  --neutral-layer-l: calc(95 + var(--appearance-surface-brightness) * 0.05);
+  --neutral-canvas-l: calc(
+    var(--neutral-layer-l) - 2.5 - var(--appearance-layer-contrast) * 0.025
+  );
+  --neutral-control-l: calc(
+    var(--neutral-canvas-l) + 1 + var(--appearance-layer-contrast) * 0.01
+  );
+  --neutral-muted-l: calc(var(--neutral-canvas-l) - 1.4 * var(--neutral-step));
+  --neutral-hover-l: calc(var(--neutral-canvas-l) - 2 * var(--neutral-step));
+  --neutral-selected-l: calc(var(--neutral-canvas-l) - 5 * var(--neutral-step));
+  --neutral-pressed-l: calc(
+    var(--neutral-canvas-l) - 6.5 * var(--neutral-step)
+  );
+  --neutral-line-l: calc(var(--neutral-canvas-l) - 5 * var(--neutral-step));
+  --neutral-ring-l: calc(var(--neutral-line-l) - 6.5 * var(--neutral-step));
+  --neutral-muted-foreground-l: calc(
+    45.1 - (96.1 - var(--neutral-muted-l)) * 0.8 -
+      var(--appearance-color-intensity) * 0.04
+  );
+
+  --background: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-canvas-l) * 1%)
+  );
+  --foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 3.9%);
+  --card: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-layer-l) * 1%)
+  );
+  --card-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 3.9%);
+  --control: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-control-l) * 1%)
+  );
+  --interaction-hover: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-hover-l) * 1%)
+  );
+  --interaction-selected: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-selected-l) * 1%)
+  );
+  --interaction-pressed: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-pressed-l) * 1%)
+  );
+  --popover: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-layer-l) * 1%)
+  );
+  --popover-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 3.9%);
   --primary: hsl(0 0% 9%);
   --primary-foreground: hsl(0 0% 98%);
-  --secondary: hsl(0 0% 96.1%);
-  --secondary-foreground: hsl(0 0% 9%);
-  --muted: hsl(0 0% 96.1%);
-  --muted-foreground: hsl(0 0% 45.1%);
-  --accent: hsl(0 0% 96.1%);
-  --accent-foreground: hsl(0 0% 9%);
+  --secondary: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-muted-l) * 1%)
+  );
+  --secondary-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 9%);
+  --muted: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-muted-l) * 1%)
+  );
+  --muted-foreground: hsl(
+    var(--neutral-hue) var(--neutral-text-saturation)
+      calc(var(--neutral-muted-foreground-l) * 1%)
+  );
+  --accent: var(--interaction-hover);
+  --accent-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 9%);
   --destructive: hsl(0 84.2% 60.2%);
   --destructive-foreground: hsl(0 0% 98%);
   /* Contextos semânticos (ADR 0006): família independente do tratamento
@@ -58,7 +151,11 @@
   --context-primary-foreground: var(--primary-foreground);
   --context-primary-subtle: color-mix(in oklab, var(--primary) 8%, transparent);
   --context-primary-emphasis: var(--foreground);
-  --context-primary-border: color-mix(in oklab, var(--primary) 25%, transparent);
+  --context-primary-border: color-mix(
+    in oklab,
+    var(--primary) 25%,
+    transparent
+  );
   /* info/success/warning: base, foreground, subtle e border (12 tokens) valem nos dois temas
      de propósito — são cores saturadas com alpha, que já se assentam sobre qualquer canvas;
      só `*-emphasis` (texto sobre o popover) precisa clarear no escuro, e é redefinido em .dark. */
@@ -79,35 +176,119 @@
   --context-warning-border: hsl(38 92% 50% / 0.35);
   --context-danger: var(--destructive);
   --context-danger-foreground: var(--destructive-foreground);
-  --context-danger-subtle: color-mix(in oklab, var(--destructive) 10%, transparent);
+  --context-danger-subtle: color-mix(
+    in oklab,
+    var(--destructive) 10%,
+    transparent
+  );
   --context-danger-emphasis: hsl(0 72% 45%);
-  --context-danger-border: color-mix(in oklab, var(--destructive) 35%, transparent);
-  --border: hsl(0 0% 92.5%);
-  --input: hsl(0 0% 92.5%);
-  /* Ring de foco LEVE (pedido da casa): aro sutil, não um halo. Com ring-[0.1875rem] + /50,
-     ~86% encosta na borda (92.5%) — um sussurro de foco. */
-  --ring: hsl(0 0% 86%);
+  --context-danger-border: color-mix(
+    in oklab,
+    var(--destructive) 35%,
+    transparent
+  );
+  --border: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-line-l) * 1%)
+  );
+  --input: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-line-l) * 1%)
+  );
+  /* O aro acompanha a borda e o contraste escolhidos, preservando o degrau do preset. */
+  --ring: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-ring-l) * 1%)
+  );
   --radius: 0.75rem;
 }
 
 .dark {
   color-scheme: dark;
-  --background: hsl(0 0% 3.9%);
-  --foreground: hsl(0 0% 98%);
-  /* Elevação com contraste de verdade (dialog/card "sobem" da página, como no site
-     do shadcn): superfície ~10% sobre fundo 3.9%, borda um ponto acima pra definir. */
-  --card: hsl(0 0% 10%);
-  --card-foreground: hsl(0 0% 98%);
-  --popover: hsl(0 0% 10%);
-  --popover-foreground: hsl(0 0% 98%);
+
+  /* Eixos ativos no modo escuro. */
+  --appearance-color-intensity: var(--appearance-dark-color-intensity);
+  --appearance-contrast: var(--appearance-dark-contrast);
+  --appearance-surface-brightness: var(--appearance-dark-surface-brightness);
+  --appearance-layer-contrast: var(--appearance-dark-layer-contrast);
+
+  /* No escuro o brilho leva o canvas do preto, em 0, até um escuro suave, em 100. Elevação com
+     contraste de verdade (dialog e card "sobem" da página): a camada sobe do canvas conforme o
+     contraste entre camadas e o controle fica entre os dois. Estados neutros, muted e bordas
+     sobem a partir da camada — a superfície mais clara — na direção do texto. Mesmos papéis do
+     claro, direção invertida. O texto secundário clareia quando as superfícies sobem acima do
+     preset e nunca escurece abaixo dele. */
+  --neutral-saturation: calc(var(--appearance-color-intensity) * 0.2%);
+  --neutral-text-saturation: calc(var(--appearance-color-intensity) * 0.08%);
+  --neutral-step: calc(1 + var(--appearance-contrast) * 0.006);
+  --neutral-canvas-l: calc(var(--appearance-surface-brightness) * 0.078);
+  --neutral-layer-l: calc(
+    var(--neutral-canvas-l) + 6.1 + var(--appearance-layer-contrast) * 0.03
+  );
+  --neutral-control-l: calc(
+    var(--neutral-canvas-l) + 3.8 + var(--appearance-layer-contrast) * 0.018
+  );
+  --neutral-muted-l: calc(var(--neutral-layer-l) + 4.9 * var(--neutral-step));
+  --neutral-hover-l: calc(var(--neutral-layer-l) + 4.9 * var(--neutral-step));
+  --neutral-selected-l: calc(
+    var(--neutral-layer-l) + 8.5 * var(--neutral-step)
+  );
+  --neutral-pressed-l: calc(var(--neutral-layer-l) + 11 * var(--neutral-step));
+  --neutral-line-l: calc(var(--neutral-layer-l) + 6.5 * var(--neutral-step));
+  --neutral-ring-l: calc(var(--neutral-line-l) + 19.5 * var(--neutral-step));
+  --neutral-muted-foreground-l: calc(
+    63.9 + max(0, var(--neutral-muted-l) - 14.9) * 1.6 +
+      var(--appearance-color-intensity) * 0.04
+  );
+
+  --background: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-canvas-l) * 1%)
+  );
+  --foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 98%);
+  --card: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-layer-l) * 1%)
+  );
+  --card-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 98%);
+  --control: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-control-l) * 1%)
+  );
+  --interaction-hover: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-hover-l) * 1%)
+  );
+  --interaction-selected: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-selected-l) * 1%)
+  );
+  --interaction-pressed: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-pressed-l) * 1%)
+  );
+  --popover: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-layer-l) * 1%)
+  );
+  --popover-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 98%);
   --primary: hsl(0 0% 98%);
   --primary-foreground: hsl(0 0% 9%);
-  --secondary: hsl(0 0% 14.9%);
-  --secondary-foreground: hsl(0 0% 98%);
-  --muted: hsl(0 0% 14.9%);
-  --muted-foreground: hsl(0 0% 63.9%);
-  --accent: hsl(0 0% 14.9%);
-  --accent-foreground: hsl(0 0% 98%);
+  --secondary: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-muted-l) * 1%)
+  );
+  --secondary-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 98%);
+  --muted: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-muted-l) * 1%)
+  );
+  --muted-foreground: hsl(
+    var(--neutral-hue) var(--neutral-text-saturation)
+      calc(var(--neutral-muted-foreground-l) * 1%)
+  );
+  --accent: var(--interaction-hover);
+  --accent-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 98%);
   /* Vermelho CLARO no escuro (era 30.6% — calibrado só pra FUNDO, com texto branco).
      Como o menu/alert/field/erros usam `text-destructive` como FOREGROUND, o valor
      escuro dava ~1,7:1 sobre o popover — ilegível. ~58% passa o AA como texto, o mesmo
@@ -119,10 +300,18 @@
   --context-success-emphasis: hsl(142 69% 58%);
   --context-warning-emphasis: hsl(43 96% 56%);
   --context-danger-emphasis: hsl(0 91% 71%);
-  --border: hsl(0 0% 16.5%);
-  --input: hsl(0 0% 16.5%);
-  /* No escuro o 83.1% virava um halo quase branco; ~36% marca o foco sem brilhar. */
-  --ring: hsl(0 0% 36%);
+  --border: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-line-l) * 1%)
+  );
+  --input: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-line-l) * 1%)
+  );
+  --ring: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc(var(--neutral-ring-l) * 1%)
+  );
 }
 
 /* Syntax highlighting (CodeBlock via prism-react-renderer): paleta calma mapeada por CSS
@@ -156,6 +345,10 @@
   --color-foreground: var(--foreground);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
+  --color-control: var(--control);
+  --color-interaction-hover: var(--interaction-hover);
+  --color-interaction-selected: var(--interaction-selected);
+  --color-interaction-pressed: var(--interaction-pressed);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
@@ -211,14 +404,38 @@
 
   /* Escala Tailwind, com receita direta para o compilador preservar modifiers `/opacity`.
      `light-dark()` mantém o peso adequado em cada tema sem uma variável intermediária. */
-  --shadow-2xs: 0 0.0625rem 0.125rem -0.0625rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.12));
-  --shadow-xs: 0 0.0625rem 0.125rem -0.0625rem light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.12)), 0 0.125rem 0.25rem -0.125rem light-dark(rgb(15 15 15 / 0.035), rgb(0 0 0 / 0.18));
-  --shadow-sm: 0 0.125rem 0.25rem -0.125rem light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.16)), 0 0.25rem 0.5rem -0.25rem light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.28));
-  --shadow: 0 0.125rem 0.375rem -0.125rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 0.375rem 0.875rem -0.375rem light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.29));
-  --shadow-md: 0 0.25rem 0.5rem -0.25rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 0.625rem 1.75rem -0.5rem light-dark(rgb(15 15 15 / 0.065), rgb(0 0 0 / 0.3));
-  --shadow-lg: 0 0.375rem 1rem -0.375rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.18)), 0 1.125rem 3rem -0.75rem light-dark(rgb(15 15 15 / 0.07), rgb(0 0 0 / 0.3));
-  --shadow-xl: 0 0.5rem 1.5rem -0.625rem light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.2)), 0 1.5rem 4rem -1.125rem light-dark(rgb(15 15 15 / 0.08), rgb(0 0 0 / 0.34));
-  --shadow-2xl: 0 0.75rem 2rem -0.875rem light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.22)), 0 2rem 5.5rem -1.5rem light-dark(rgb(15 15 15 / 0.1), rgb(0 0 0 / 0.38));
+  --shadow-2xs: 0 0.0625rem 0.125rem -0.0625rem
+    light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.12));
+  --shadow-xs:
+    0 0.0625rem 0.125rem -0.0625rem
+      light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.12)),
+    0 0.125rem 0.25rem -0.125rem
+      light-dark(rgb(15 15 15 / 0.035), rgb(0 0 0 / 0.18));
+  --shadow-sm:
+    0 0.125rem 0.25rem -0.125rem
+      light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.16)),
+    0 0.25rem 0.5rem -0.25rem
+      light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.28));
+  --shadow:
+    0 0.125rem 0.375rem -0.125rem
+      light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)),
+    0 0.375rem 0.875rem -0.375rem
+      light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.29));
+  --shadow-md:
+    0 0.25rem 0.5rem -0.25rem
+      light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)),
+    0 0.625rem 1.75rem -0.5rem
+      light-dark(rgb(15 15 15 / 0.065), rgb(0 0 0 / 0.3));
+  --shadow-lg:
+    0 0.375rem 1rem -0.375rem
+      light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.18)),
+    0 1.125rem 3rem -0.75rem light-dark(rgb(15 15 15 / 0.07), rgb(0 0 0 / 0.3));
+  --shadow-xl:
+    0 0.5rem 1.5rem -0.625rem light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.2)),
+    0 1.5rem 4rem -1.125rem light-dark(rgb(15 15 15 / 0.08), rgb(0 0 0 / 0.34));
+  --shadow-2xl:
+    0 0.75rem 2rem -0.875rem light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.22)),
+    0 2rem 5.5rem -1.5rem light-dark(rgb(15 15 15 / 0.1), rgb(0 0 0 / 0.38));
 }
 
 /* Base canônica do consumidor — vem DAQUI, não do entry de cada app. Tailwind v4
@@ -261,7 +478,12 @@
   }
   :root:is(:hover, :focus, :focus-within),
   :root *:is(:hover, :focus, :focus-within) {
-    scrollbar-color: color-mix(in srgb, var(--muted-foreground) 35%, transparent) transparent;
+    scrollbar-color: color-mix(
+        in srgb,
+        var(--muted-foreground) 35%,
+        transparent
+      )
+      transparent;
   }
   :root::-webkit-scrollbar,
   :root *::-webkit-scrollbar {
@@ -281,7 +503,11 @@
   }
   :root:is(:hover, :focus, :focus-within)::-webkit-scrollbar-thumb,
   :root *:is(:hover, :focus, :focus-within)::-webkit-scrollbar-thumb {
-    background-color: color-mix(in srgb, var(--muted-foreground) 35%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--muted-foreground) 35%,
+      transparent
+    );
   }
 }
 
@@ -311,19 +537,28 @@
  * O guard [class~='not-prose'] espelha o escopo do plugin typography: sem ele a
  * regra custom vaza pra dentro do not-prose (o CodeBlock ganhava uma SEGUNDA
  * borda no <pre>, colada na do contêiner — a "borda duplicada"). */
-.prose :where(code):not(:where(pre code, [class~='not-prose'], [class~='not-prose'] *)) {
+.prose
+  :where(code):not(
+    :where(pre code, [class~="not-prose"], [class~="not-prose"] *)
+  ) {
   border-radius: calc(var(--radius) - 0.25rem);
   background: var(--muted);
   padding: 0.125rem 0.375rem;
   font-weight: 400;
 }
-.prose :where(code):not(:where(pre code, [class~='not-prose'], [class~='not-prose'] *))::before,
-.prose :where(code):not(:where(pre code, [class~='not-prose'], [class~='not-prose'] *))::after {
+.prose
+  :where(code):not(
+    :where(pre code, [class~="not-prose"], [class~="not-prose"] *)
+  )::before,
+.prose
+  :where(code):not(
+    :where(pre code, [class~="not-prose"], [class~="not-prose"] *)
+  )::after {
   content: none;
 }
 
 /* Code block = superfície da casa (borda + bg muted) — só o <pre> CRU do prose. */
-.prose :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   border: 1px solid var(--border); /* px: hairline do bloco de código — 1 pixel físico, não escala. */
 }
 
@@ -347,11 +582,15 @@
   justify-content: center;
 }
 
-.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button]:focus-visible {
+.toaster
+  .opus-toast[data-sonner-toast]
+  .opus-toast-close[data-close-button]:focus-visible {
   box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--ring) 50%, transparent);
 }
 
-.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button][data-disabled='true'] {
+.toaster
+  .opus-toast[data-sonner-toast]
+  .opus-toast-close[data-close-button][data-disabled="true"] {
   pointer-events: none;
   opacity: 0.5;
 }
@@ -367,15 +606,23 @@
   background: var(--popover);
   color: var(--muted-foreground);
   outline: none;
-  transition: color 150ms, background-color 150ms, box-shadow 150ms;
+  transition:
+    color 150ms,
+    background-color 150ms,
+    box-shadow 150ms;
 }
 
-.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button]:hover {
+.toaster
+  .opus-toast[data-sonner-toast]
+  .opus-toast-close[data-close-button]:hover {
   background: var(--accent);
   color: var(--accent-foreground);
 }
 
-.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button] svg {
+.toaster
+  .opus-toast[data-sonner-toast]
+  .opus-toast-close[data-close-button]
+  svg {
   width: 1rem;
   height: 1rem;
 }