@nadicodeai/design-system 5.3.6 → 6.0.0

package/DESIGN.md

@@ -44,7 +44,6 @@ colors:
   warning: "#ffc220"
   warning-soft: "#fff3d1"
   warning-deep: "#7a5800"
-  flag-red: "#d3302f"
   verde-vivo: "#008c45"
   selection-bg: "#111111"
   selection-fg: "#fafafa"
@@ -56,8 +55,6 @@ colors:
   state-review: "#ffc220"
   state-blocked: "#d3302f"
   state-complete: "#00a85a"
-  background-100: "#ffffff"
-  background-200: "#fafafa"
   identity-verde: "#00a85a"
   identity-rosso: "#d3302f"
   identity-arancio: "#ff5a1f"
@@ -110,9 +107,6 @@ colors:
   dark-info: "#8098ff"
   dark-info-soft: "#070f47"
   dark-info-deep: "#b3c1ff"
-  dark-cyan: "#33d1cb"
-  dark-cyan-soft: "#7ee8de"
-  dark-cyan-deep: "#1f9e9a"
   dark-success: "#17bd68"
   dark-success-soft: "#00351c"
   dark-success-deep: "#93e3b8"
@@ -296,7 +290,7 @@ One foundation, three registers. The foundation is every `core` value in this co
 
 A register decides where a foundation value appears and adds rules of its own. It never redefines a foundation value and never mints one: a value its physics need and the foundation lacks is authored in this contract under `register.<name>`.
 
-The kernel is the reusable implementation layer. `DESIGN.md` defines the reusable contract and exported scalar tokens; the `@nadicodeai/design-system/css` bundle (`src/css/**`) demonstrates and exercises that contract. Homepage copy, page-specific ordering, and temporary prototypes do not belong in this file.
+`DESIGN.md` defines the reusable contract and exported scalar tokens; the `@nadicodeai/design-system/css` bundle (`src/css/**`) realises that contract. Homepage copy, page-specific ordering, and temporary prototypes do not belong in this file.
 
 ## Colors
 
@@ -304,7 +298,7 @@ Neutrals carry the interface: grounds, chrome, hierarchy, and every control come
 
 Interaction states are material, not meaning: focus, hover, and selection read as contrast steps on the neutral spine. A hover ground is a neutral step; the only change a control hover carries is a step inside its own family, as `{colors.action-hover}` does on the action control. Cobalto stays on info and running.
 
-Every value a role needs is carried by the role token itself; the ten-step numeric scale families were removed deliberately and must not be reintroduced. Two neutral page grounds sit under the roles below: `{colors.background-100}` (page default, white) and `{colors.background-200}` (soft, used sparingly). The neutral spine — `{colors.ink}`, `{colors.body}`, `{colors.muted}`, `{colors.canvas}`, `{colors.canvas-soft}`, `{colors.canvas-soft-2}`, `{colors.line}`, `{colors.seam}` — is strictly achromatic: every neutral is an equal-channel gray (OKLCH chroma 0) in both themes. The five identity-palette hues are cross-spectrum equals, so any neutral bias would flatter one and dirty another; hue arrives full-strength through the chromatic roles or not at all, and no tint ever paints an app surface. Colours are authored as sRGB hex here and emitted as `oklch()` in the generated CSS.
+Every value a role needs is carried by the role token itself; there is no numeric scale family. The neutral spine — `{colors.ink}`, `{colors.body}`, `{colors.muted}`, `{colors.canvas}`, `{colors.canvas-soft}`, `{colors.canvas-soft-2}`, `{colors.line}`, `{colors.seam}` — is strictly achromatic: every neutral is an equal-channel gray (OKLCH chroma 0) in both themes. The five identity-palette hues are cross-spectrum equals, so any neutral bias would flatter one and dirty another; hue arrives full-strength through the chromatic roles or not at all, and no tint ever paints an app surface. Colours are authored as sRGB hex here and emitted as `oklch()` in the generated CSS.
 
 ### Semantic roles (functional tier)
 
@@ -318,8 +312,7 @@ Every value a role needs is carried by the role token itself; the ten-step numer
 - **Navigation selection** (`{colors.navigation-selection-bg}`, `{colors.navigation-selection-fg}`, `{colors.navigation-selection-hover}`): the selected destination in persistent product navigation, a neutral ink pill. Selection is a place, not a meaning, so it holds by contrast on the neutral spine; cobalto belongs to the semantic info and running roles only. The dark counterparts are tuned independently for the black console. Resting and hover pairs clear AA for text, and the offset focus outline stays visible against both the pill fill and the adjacent canvas.
 - **Semantic feedback** (`{colors.success}` = verde with `{colors.success-soft}`/`{colors.success-deep}`; `{colors.error}` = rosso funzionale `#d3302f` with `{colors.error-soft}`/`{colors.error-deep}`; `{colors.warning}` = giallo `#ffc220` with `{colors.warning-soft}`/`{colors.warning-deep}`; `{colors.info}` = cobalto `#1e3cff` with `{colors.info-soft}`/`{colors.info-deep}`): validation, caution, approval, and operational feedback. In each pair the `-soft` value is the tinted tag/banner ground and the `-deep` value is the AA-clearing text on it. On a solid `error` fill (the shadcn `destructive` role) text is white; on a solid `warning` or `success` fill text is ink. The success pair intentionally reuses the link pair's AA-safe verde values; its feedback meaning remains distinct from inline navigation and entity-status semantics.
 - **Accent** (`{colors.accent}` = arancio `#ff5a1f`): a small emphasis mark for exception flags and highlights; it appears as a mark, carries no text, and paints no fill or background. The identically-named shadcn surface role is a different thing — a neutral (`{colors.canvas-soft-2}` light, `{colors.dark-canvas-soft-2}` dark) with no hue.
-- **Flag Red** (`{colors.flag-red}` = `#d3302f`): the identity-mark red alias. It shares its hex with `{colors.error}` but stays a distinct role name — `flag-red` is identity, `error` is validation feedback. The attention accent is arancio, not flag red.
-- **Verde vivo** (`{colors.verde-vivo}` = `#008c45`, dark `{colors.dark-verde-vivo}` = `#62d494`): Nadia's presence accent. It paints the marks that say *Nadia herself is here*: the first-run medallion, a live-presence indicator beside her portrait. It is a mark colour, never a control fill, a text colour, a link, or a status; `action`, `link`, and `success` keep their jobs. It clears the 3:1 non-text floor on `{colors.canvas}` (4.3:1) and `{colors.dark-canvas}` (11.4:1) and carries no text of its own. White on it is 4.34:1, below AA for normal text, so a label never sits on a `verde-vivo` fill; the ring, halo, or portrait sits on it and the words sit on the canvas.
+- **Verde vivo** (`{colors.verde-vivo}` = `#008c45`, dark `{colors.dark-verde-vivo}` = `#62d494`): Nadia's presence accent. It paints the marks that say *Nadia herself is here*, such as the success beat over her silhouette at a threshold (`@nadicodeai/ui/threshold`). It is a mark colour, never a control fill, a text colour, a link, or a status; `action`, `link`, and `success` keep their jobs. It clears the 3:1 non-text floor on `{colors.canvas}` (4.3:1) and `{colors.dark-canvas}` (11.4:1) and carries no text of its own. White on it is 4.34:1, below AA for normal text, so a label never sits on a `verde-vivo` fill; the ring, halo, or portrait sits on it and the words sit on the canvas.
 - **Workflow States** (`{colors.state-ready}` neutral, `{colors.state-running}` cobalto, `{colors.state-review}` giallo, `{colors.state-blocked}` rosso, `{colors.state-complete}` verde): the left-border/state vocabulary for agentic work surfaces — cobalto means in motion, verde means done. The dark counterparts (`{colors.dark-state-ready}`, `{colors.dark-state-running}`, `{colors.dark-state-review}`, `{colors.dark-state-blocked}`, `{colors.dark-state-complete}`) keep the same functional identity. These colours are carried by non-text state accents only — meter and bullet segments, delta marks, and the brand book's own rails; label text stays on the neutral foreground roles for contrast in both themes. Status is not one of their jobs: every status the product renders is the Badge status vocabulary (see `## Status Vocabulary`), which reads from the semantic feedback and link pairs, and the two token sets never cross.
 
 ### Chart categoricals (functional tier)
@@ -337,8 +330,6 @@ Five full-strength hues are the system's expressive chromatic range: verde `{col
 
 This achromatic-neutral discipline is not dark-specific: it governs the generated shadcn surface-role bridge in both the light `:root` and dark `.dark` maps. The neutral surface family — `background`, `card`, `popover`, `muted`, `secondary`, `sidebar`, `sidebar-accent`, their neutral foreground/border variants, plus `border` and `input` — resolves only to exact equal-channel grays (OKLCH chroma 0) in both themes. Hue in the role bridge is reserved for the explicit semantic roles `destructive`, `success`, and `warning`; `primary` resolves to the neutral action family. The focus rings (`ring`/`sidebar-ring`) and the `sidebar-primary*` navigation-selection family resolve to equal-channel grays like the surface family: focus and selection are material states, and no interaction state carries a hue. In dark product shells, `background`, `card`, `popover`, and `sidebar` share `{colors.dark-canvas}` so page chrome, cards, tables, overlays, and nav rails read as one console. `muted`, `secondary`, and `accent` retain the `dark-canvas-soft` steps for small interaction states such as hover, selected rows, keycaps, and inline controls. Large product surfaces never take a tinted or soft-panel fill by default.
 
-A colour leaves this contract only through an explicit palette migration decision; what the current website kernel happens to consume is not palette authority.
-
 ## Data Visualization
 
 ### Entity-color assignment
@@ -352,7 +343,7 @@ A colour leaves this contract only through an explicit palette migration decisio
 
 ### Meter and bullet grammar
 
-- **Meter and bullet grammar**: cap and included-usage bars carry a positional threshold tick at the product-configured warning fraction (80% is the common default; the fraction is a consumer input, never a constant of this contract) and a cap tick at 100%. Overflow renders as a distinct segment continuing past the cap tick, never clamped away. Severity state tokens (`{colors.state-*}`) reinforce position, never act as the sole signal. The current value reads at the bar tip. Every meter carries an accessible name, and its `aria` values clamp to the meter maximum. A meter has two scales. At panel scale the grammar above holds whole. At row scale — a meter inside a membership row, shown only once the value is already past the warning rung — it is a warning rather than a gauge: it drops both ticks and the tip value for a percent and a thin bar on one line, because a row cannot encode position legibly and the reader is asking how close the wall is, not how many. The overflow segment and the accessible name survive at both scales; the words a caption would have printed live in that name.
+- **Meter and bullet grammar**: cap and included-usage bars carry a positional threshold tick at the product-configured warning fraction (80% is the common default; the fraction is a consumer input, never a constant of this contract) and a cap tick at 100%. Overflow renders as a distinct segment continuing past the cap tick, never clamped away. Severity state tokens (`{colors.state-*}`) reinforce position, never act as the sole signal. The current value reads at the bar tip. Every meter carries an accessible name, and its `aria` values clamp to the meter maximum. A meter has two scales. At panel scale the grammar above holds whole. At row scale — a meter inside a list row, shown only once the value is already past the warning rung — it is a warning rather than a gauge: it drops both ticks and the tip value for a percent and a thin bar on one line, because a row cannot encode position legibly and the reader is asking how close the wall is, not how many. The overflow segment and the accessible name survive at both scales; the words a caption would have printed live in that name.
 
 ### Mark specs
 
@@ -378,11 +369,11 @@ All body, title, caption, and code typography uses `letterSpacing: 0px`. Do not
 
 | Token                         | Size | Weight | Line Height | Use                                                                        |
 | ----------------------------- | ---- | ------ | ----------- | -------------------------------------------------------------------------- |
-| `{typography.display-xl}`     | 72px | 600    | 74px        | Large desktop homepage hero only.                                          |
+| `{typography.display-xl}`     | 72px | 600    | 74px        | Hero headline at the widest breakpoint.                                    |
 | `{typography.display-lg}`     | 52px | 600    | 54px        | Compact hero and major landing headlines.                                  |
-| `{typography.display-md}`     | 24px | 600    | 32px        | Recovered display tier for compact cards, pricing names, and asset labels. |
-| `{typography.display-sm}`     | 20px | 600    | 28px        | Recovered small display tier for inline display micro-headings.            |
-| `{typography.title-lg}`       | 40px | 600    | 41px        | Kernel specimen headings and major section headings.                       |
+| `{typography.display-md}`     | 24px | 600    | 32px        | Compact display tier: action bands, plan names, a threshold's sentence.    |
+| `{typography.display-sm}`     | 20px | 600    | 28px        | Small display tier for inline display headings.                            |
+| `{typography.title-lg}`       | 40px | 600    | 41px        | Major section headings.                                                    |
 | `{typography.title-md}`       | 30px | 600    | 32px        | Standard section title.                                                    |
 | `{typography.title-sm}`       | 22px | 600    | 25px        | Cell and artifact titles.                                                  |
 | `{typography.body-lg}`        | 18px | 400    | 27px        | Hero/lead paragraphs.                                                      |
@@ -394,7 +385,7 @@ All body, title, caption, and code typography uses `letterSpacing: 0px`. Do not
 | `{typography.caption-strong}` | 12px | 500    | 16px        | Compact emphasised labels on chrome and chips.                             |
 | `{typography.caption-mono}`   | 12px | 500    | 16px        | Eyebrows, identifiers and code.                                            |
 | `{typography.code}`           | 13px | 400    | 20px        | Tool calls, snippets, traces.                                              |
-| `{typography.button-lg}`      | 16px | 500    | 24px        | Marketing-scale button labels.                                             |
+| `{typography.button-lg}`      | 16px | 500    | 24px        | Large button labels.                                                       |
 | `{typography.button-md}`      | 14px | 500    | 18px        | Standard button and control labels.                                        |
 
 ## Layout
@@ -473,7 +464,7 @@ Height tokens are fixed by component family and breakpoint. Components may grow
 
 Page shells must prevent horizontal scrollbars when a mathematically aligned full-bleed surface uses viewport width. Clip horizontal overflow at the shell/root level; do not hide overflow on structural cells to mask bad seam math.
 
-Kernel compositions arrange approved primitives for a content role. They must not redefine page-frame math, row seams, marker placement, side-fill ownership, active-lane spans, or global guide primitives. If a composition needs new structural geometry, promote that geometry into the page grammar or a real component first.
+Compositions arrange approved primitives for a content role. They must not redefine page-frame math, row seams, marker placement, side-fill ownership, active-lane spans, or global guide primitives. If a composition needs new structural geometry, promote that geometry into the page grammar or a real component first.
 
 ### Delivery Tiers
 
@@ -513,16 +504,14 @@ Page grammar is the NadicodeAI structural system. It defines how pages are built
 
 **`rule-svg`** — bounded dashed connector rule. Uses `{colors.seam}` and never overlaps a cell seam.
 
-The generic marketing/SaaS section patterns (Nav, Hero, Logo cloud, Statement, Texture strip, Feature grid, Feature rows, Bento, Steps, Integrations, Live demo, Stats, Testimonial, Security/data, Pricing, FAQ, Team, Contact, CTA band, Footer) ship as React shadcn compositions from `@nadicodeai/ui`, composed over the kept page grammar above. This contract no longer documents them as a pure-CSS section layer; the page grammar is the framework-agnostic foundation those compositions assemble.
+Reusable section compositions ship as React components from `@nadicodeai/ui`, composed over the page grammar above; the page grammar is the framework-agnostic foundation they assemble.
 
 ### Related Layout Helpers
 
-These live helpers are part of the kept page-grammar layout layer. They support index/long-form page assemblies rather than naming an interface component.
+This live helper is part of the kept page-grammar layout layer. It supports index-style page assemblies rather than naming an interface component.
 
 **`index-grid`** — layout helper for index-style page assemblies (blog, learn, and case-study rows whose guide layer owns the dividers).
 
-**`article-frame`** — layout helper for the long-form reading companion in article/index page assemblies.
-
 `index-card` is the repeated item class inside `index-grid`, not a standalone contract key.
 
 ## Elevation & Depth
@@ -531,7 +520,7 @@ Product UI uses one shared material ladder. The workspace is one continuous grou
 
 Glass is a material variant, not an elevation step. Floating chrome may be glass: menus, popovers, selects, comboboxes, the command palette, and bars, the surfaces that stand over the room and show it through themselves. Content surfaces stay solid: cards, KPIs, tables, inspectors, and dialog, sheet, and drawer bodies, because glass floats but never carries content. Inside the window, glass composites only over our own content; a product whose window the operating system composites states its window material in its register. Glass keeps exactly one separator, the integrated edge ring of its elevation falloff, never ring plus shadow plus border stacked. Reduced-transparency mode replaces glass with the same solid material at the same elevation.
 
-The Google design schema defines no opacity, elevation, or motion group. Those values are authored in the one `json design-tokens` fence under "CSS Architecture & Token Pipeline", "Authored token extension". `core.material` holds the four values this section applies and emits them as `--nc-material-*`: `scrim-opacity` becomes the theme layer's `--opacity-scrim`, and the three glass values are consumed by `@nadicodeai/ui/globals.css`. `core.elevation` holds the four rungs and emits `--nc-elevation-resting`, `-raised`, `-floating`, and `-modal`.
+The material and elevation values are authored in the one `json design-tokens` fence under "CSS Architecture & Token Pipeline", "Authored token extension". `core.material` holds the four values this section applies and emits them as `--nc-material-*`: `scrim-opacity` becomes the theme layer's `--opacity-scrim`, and the three glass values are consumed by `@nadicodeai/ui/globals.css`. `core.elevation` holds the four rungs and emits `--nc-elevation-resting`, `-raised`, `-floating`, and `-modal`.
 
 | Material role | Construction                                                                                                       | Use                                                                                                                                                                                                                      |
 | ------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -568,7 +557,7 @@ Public page-grammar cells are not cards and remain square because their parent f
 
 Motion reports state: things move when something changes, briefly, and settle. Continuous, ambient motion is scarce and purposeful — the Agent identity visuals are its natural carrier — and repeated interactions stay fast and quiet. Motion preserves meaning when movement is reduced.
 
-The durations and easings live in `core.motion` of the authored token extension ("CSS Architecture & Token Pipeline"); the Google design schema defines no motion group. The build emits every duration as `--nc-duration-*` and every easing as `--nc-ease-*`. `src/css/motion.css` owns the keyframes, the `nc-anim-*` and `nc-transition-*` classes, and the reduced-motion law, and references those names; it declares no duration, easing, or alias of its own. A register decides where motion appears; it never picks a duration outside this list.
+The durations and easings live in `core.motion` of the authored token extension ("CSS Architecture & Token Pipeline"). The build emits every duration as `--nc-duration-*` and every easing as `--nc-ease-*`. `src/css/motion.css` owns the keyframes, the `nc-anim-*` and `nc-transition-*` classes, and the reduced-motion law, and references those names; it declares no duration, easing, or alias of its own. A register decides where motion appears; it never picks a duration outside this list.
 
 | Token | Use |
 | --- | --- |
@@ -596,7 +585,7 @@ A register adds rules. It never redefines a foundation value. A value one regist
 | Portal | `apps/portal/docs/design-doctrine.md` | `register.portal.density`: `filter-chip-gap`, `filter-chip-height`, `filter-chip-icon` | System, light, dark, on the `.dark` class |
 | Nadia desktop app | `apps/nadia/docs/design-doctrine.md` | `register.nadia.*`: colour-role and radius aliases; six deprecated elevation recipes and the legacy overlay border remain as compatibility data. New surfaces consume the foundation's material roles | Follows the operating system, on the `.dark` class |
 
-The website's depth is flat and architectural: hairlines, contrast, dotted fields, diagonal fills, and dark action bands make hierarchy, and the page frame and row grid stay dominant. It uses no rung of the material ladder and no floating card stack as page structure. Marketing bands may use `register.website.layout.section`, emitted as `--nc-section`, when they need the broader inherited hero rhythm. The website kernel uses no negative letter spacing outside the two display tiers.
+The website's depth is flat and architectural: hairlines, contrast, dotted fields, diagonal fills, and dark action bands make hierarchy, and the page frame and row grid stay dominant. It uses no rung of the material ladder and no floating card stack as page structure. Marketing bands may use `register.website.layout.section`, emitted as `--nc-section`, when they need the broader inherited hero rhythm. The website uses no negative letter spacing outside the two display tiers.
 
 The Portal and the desktop are product shells on the material ladder above, each by its rulebook. The desktop's window material is the operating system's where the OS composites the window; inside the window the foundation's glass law holds.
 
@@ -614,7 +603,7 @@ Keyboard focus has one owner: the kit's foundation layer draws the full-opacity
 
 **`badge-secondary`** — small rounded metadata badge for "New", "Beta", "Live", or similar labels.
 
-**`filter-chip`** — removable selected-filter label. Neutral chrome only: `{colors.line}` border, muted/background fill, foreground text, compact radius, and an inline remove icon with a visible `:focus-visible` ring. It names the active facet/value pair and clears that facet; it does not carry lifecycle, workflow, product-tier, or feature-state color. Use this for table/search filters after a shadcn `Select`, `Popover`, or command filter is applied.
+**`filter-chip`** — removable selected-filter label. Neutral chrome only: `{colors.line}` border, muted/background fill, foreground text, compact radius, and an inline remove icon with a visible `:focus-visible` ring. It names the active facet/value pair and clears that facet; it does not carry lifecycle, workflow, product-tier, or feature-state color.
 
 **`link-inline`** — inline body link. Uses `{colors.link}` and normal body rhythm.
 
@@ -643,46 +632,38 @@ Agent identity is decorative product identity, not a work artifact or a status s
 ## Status Vocabulary
 
 Status is the one thing every surface in the product says: an agent is active, a
-key is revoked, an invitation is waiting, a run is blocked. It is said one way.
-
-**What it is.** The single status carrier is the React `Badge` from
-`@nadicodeai/ui`, rendered in one of five semantic tones with a small mark in
-its icon slot. It is not a CSS component in this package: there is no
-framework-neutral status class, and a static surface that needs to show a status
-shows it as ordinary text. Its React API — the tone variants, the icon slot, and
-what a consuming app must supply — is contracted in
-[`packages/ui/docs/contract.md`](../ui/docs/contract.md).
-
-**Why.** A status read by colour alone is not read by everyone, and a product
-that speaks status in three grammars teaches its next surface to invent a
-fourth. One badge, carrying an icon and a word with the tone only reinforcing
-both, is legible without colour and leaves nothing to invent.
-
-**What it does.** Five tones, each a soft ground with its deep label from an
-existing semantic pair: gray on the neutral spine for the default and every
-terminal, no-action state; green on the link pair for healthy and complete; red
-on the error pair for unusable and failed; amber on the warning pair for waiting
-on a decision; blue on the info pair for a step in motion. One mark per tone, so
-the shape repeats the tone rather than adding a second axis. The families —
-which statuses exist and which tone each value takes — belong to the consuming
-app, because they are its domain, not this contract's; the Portal keeps its
-whole map in one module and no surface picks a status colour anywhere else.
+key is revoked, an invitation is waiting, a run is blocked. It is said one way:
+one badge carrying an icon and a word, in one of five semantic tones that only
+reinforce both, so a status is legible without colour and no surface invents a
+second grammar.
+
+Each tone pairs a soft ground with its deep label from an existing semantic
+pair: gray on the neutral spine for the default and every terminal, no-action
+state; green on the link pair for healthy and complete; red on the error pair
+for unusable and failed; amber on the warning pair for waiting on a decision;
+blue on the info pair for a step in motion. One mark per tone, so the shape
+repeats the tone rather than adding a second axis.
+
+The carrier is the React `Badge` in `@nadicodeai/ui`, contracted in
+[`packages/ui/docs/contract.md`](../ui/docs/contract.md). This package ships no
+status class; a static surface shows a status as ordinary text. Which statuses
+exist and which tone each takes belong to the consuming app, which keeps its
+whole map in one module.
 
 ## System activity
 
-System activity, measured progress and settled status share the foundation's
-visual language. Activity is transient: it communicates ongoing work, then
-gives way to content or outcome feedback. The shared activity family uses
-neutral ink for its structure and the cobalto info role for moving foreground
-particles. The existing success, warning and error roles keep their meanings.
+System activity, measured progress and settled status share one visual
+language. Activity is transient: it communicates ongoing work, then gives way
+to content or outcome feedback. The activity family uses neutral ink for its
+structure and the cobalto info role for moving foreground particles; success,
+warning and error keep their meanings. Measurable completion uses progress,
+and waiting for a person or a failed operation uses the feedback treatment.
 
-`ActivityOrb` in `@nadicodeai/ui` renders three distinct activities: loading,
-connecting and processing. Its closed motion recipes, operation mapping,
+The renderer is `ActivityOrb` in `@nadicodeai/ui`, with three activities:
+loading, connecting and processing. Its motion recipes, operation mapping,
 sizes and runtime behaviour are owned by
-[`packages/ui/docs/activity.md`](../ui/docs/activity.md). A consuming app
-chooses the actual activity and supplies its readable meaning. Measurable
-completion uses progress, and waiting for a person or a failed operation uses
-the existing feedback treatment.
+[`packages/ui/docs/activity.md`](../ui/docs/activity.md); a consuming app
+chooses the activity and supplies its readable meaning.
 
 ## Do's and Don'ts
 
@@ -692,7 +673,6 @@ This section states the correct form; a complete positive definition is the whol
 - Every visible line has one owner: ordinary seams are `{spacing.guide}` at `{colors.line}`, tuned only at the token contract; control boundaries are `{colors.input}` / `{colors.dark-input}`; keyboard focus is the dedicated focus-ring roles; crosshairs are `{colors.cross}` at `{spacing.guide}` weight.
 - Page structure is architectural: hairlines, luminance, spacing, and the grammar above. One material role per product container; structural page-grammar cells are border-only; the four `nc-elevation-*` rungs are the complete shadow vocabulary; modal scrims stay unblurred.
 - Typography uses fixed token sizes stepped by breakpoint; components take their default heights from the exported height tokens and grow only when real content requires it.
-- Each row carries one story beat; the full-lane `stage` presents one major use-case story; pricing, logo, banner, and showcase compositions appear when the page truly contains that content, with real, approved material.
 - Agent identity visuals identify an Agent or its explicit type; conversations, artifacts, review states, and work output belong to assistant-ui and the agentic work surfaces. Text beside `{colors.verde-vivo}` sits on the canvas.
 - Components are named as NadicodeAI-owned primitives, and this file carries contract only: tokens, semantics, and application rules — component prop APIs, state matrices, screenshots, and page-specific material live with their owners.
 - Each register keeps its own structure and chrome: the page grammar on the website, the material ladder in the Portal and the desktop, the desktop window following the operating system.
@@ -715,9 +695,35 @@ complete the treatment. Static and React icon sources stay version-aligned so a
 glyph has one silhouette everywhere. Text-paired icons are decorative; icon-only
 controls carry an accessible name.
 
+## Brand media authority
+
+The NadicodeAI logo has three approved forms:
+
+1. **Horizontal lockup.** One interlocked-link mark followed by one NadicodeAI wordmark. The mark sits on the left, is scaled to the wordmark's capital height, and shares its baseline. Use this form when a company identifier needs both the mark and the readable name.
+2. **Mark.** The two interlocked rounded-square links may stand alone where space is tight: favicons, app icons, avatars, watermarks, stamps, and compact navigation. A containing link or control names NadicodeAI when the mark is used without visible text.
+3. **Wordmark.** The NadicodeAI letterforms may stand alone where the name must read by itself, including document headers and editorial layouts.
+
+Other companies' marks are not NadicodeAI company logos and are not governed by anything in this section. They are generated identity images owned by `@nadicodeai/ui/components/brand-icons`; [`packages/ui/docs/contract.md`](../ui/docs/contract.md) carries their rules. A third-party mark never enters a NadicodeAI logo form, composition, or clear-space measurement.
+
+Nadia's portrait, Agent identity visuals, and generated imagery are not NadicodeAI company logos. Nadia's identity and selection rules live in [`brand/AGENTS.md`](../../brand/AGENTS.md); the Agent identity system lives in [`packages/ui/docs/agent-visual.md`](../ui/docs/agent-visual.md); editorial imagery routes through [`skills/marketing/blog-imagegen/references/editorial-register.md`](../../skills/marketing/blog-imagegen/references/editorial-register.md). This contract owns only the package delivery interface.
+
+The approved transparent Nadia master ships at `assets/nadia-solid-surface`. Package delivery does not grant brand approval; which Nadia image a surface may use stays with the identity document named above.
+
+All three forms derive from one authored, framework-neutral geometry source exported as `@nadicodeai/design-system/assets/logo-geometry`. The lockup combines the shared mark and wordmark geometry at the established proportion and spacing. No SVG, React component, favicon, document, or app re-authors, traces, typesets, or rearranges those shapes.
+
+Use the positive form on `{colors.canvas}` and the soft neutral canvases: ink letterforms and link with the primary verde link and `AI` suffix. Use the inverse form on `{colors.identity-ink}`: `{colors.identity-white}` letterforms and link with the dark-primary verde link and `AI` suffix. On `{colors.identity-verde}`, use the supplied on-verde form with one ink link and one white link. On photography, place the logo in a quiet area or over a scrim that keeps every part legible; when neither is available, mount it on an approved solid field. One surface uses one treatment.
+
+The clear-space unit is the rendered width of one link stroke in the mark. Keep at least one unit free on every side of the mark and lockup, with no text, rule, image, or container edge inside it. A wordmark used alone keeps the same unit that the mark would have at the wordmark's capital height. Minimum rendered sizes are 16 CSS pixels or 5 mm for the mark, 130 CSS pixels or 32 mm wide for the lockup, and 96 CSS pixels or 25 mm wide for the wordmark. Browser and operating-system icon slots use the supplied favicon or app-icon files at the platform's required size and are exempt from the screen minimum. Never compress, crop, or distort a logo to fit.
+
+For a meaningful standalone image, use the accessible name `NadicodeAI`; the accessible name is the label that identifies an image, link, or control to assistive technology. When a containing link or control already has that accessible name, hide the logo image from assistive technology with empty alt text. Never repeat the same accessible name on both the container and the image.
+
+Do not redraw, retype, reorder, stretch, crop, rotate, recolor, outline, shadow, animate, or add effects or gradients to a logo form. Do not flatten the over-under interlock, add a third link, alter the proportions or lockup spacing, stack the forms, embed the mark inside the wordmark, place the mark after the wordmark, combine it with another mark, or substitute Nadia imagery for it.
+
+The package build renders and publicly exports full-colour, mono-ink, inverse, and on-verde SVG and transparent PNG files for the lockup, mark, and wordmark from the geometry and current `colors.*` contract. React consumers use `BrandLockup`, `BrandMark`, or `BrandWordmark` according to the roles above. The operator-only favicon generator wraps the same mark geometry in the platform tile and may adapt tile radius, output size, and fixed-tile paint roles; it does not substitute another mark. Private geometry templates do not ship. A contract or geometry change is completed by regeneration, never by repainting an output or updating a fallback by hand.
+
 ## CSS Architecture & Token Pipeline
 
-How this contract becomes shipped CSS. The private CSS authoring graph lives in `src/css/`; the build flattens that graph and inlines its component icon dependencies into the single public `dist/css/index.css` artifact exported as `@nadicodeai/design-system/css`. Generated files and partials never ship as package subpaths. The cascade is `@layer tokens, theme, reset, foundation, motion, layout, primitives, components;` with no `sections` layer. Since the Tailwind+shadcn migration, the bundle ships only framework-agnostic brand and display CSS components. Generic marketing/SaaS components and the former `sections/*` layer ship as React components from `@nadicodeai/ui`.
+How this contract becomes shipped CSS. The private CSS authoring graph lives in `src/css/`; the build flattens that graph and inlines its component icon dependencies into the single public `dist/css/index.css` artifact exported as `@nadicodeai/design-system/css`. Generated files and partials never ship as package subpaths. The cascade is `@layer tokens, theme, reset, foundation, motion, layout, primitives, components;` with no `sections` layer. The bundle ships only framework-agnostic brand and display CSS components; generic marketing and SaaS components ship as React components from `@nadicodeai/ui`.
 
 ### Public style interfaces
 
@@ -957,8 +963,7 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
           "sidebar-background": {"$value":"{core.color.canvas-soft}"},
           "sidebar-border": {"$value":"{core.color.line}"},
           "user-bubble": {"$value":"{core.color.canvas-soft-2}"},
-          "user-bubble-border": {"$value":"{core.color.line}"},
-          "medallion": {"$value":"{core.color.verde-vivo}"}
+          "user-bubble-border": {"$value":"{core.color.line}"}
         },
         "dark": {
           "$type": "color",
@@ -981,13 +986,12 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
           "ring": {"$value":"{core.color.dark-focus-ring}"},
           "midground": {"$value":"{core.color.dark-muted}"},
           "composer-ring": {"$value":"{core.color.dark-focus-ring}"},
-          "destructive": {"$value":"{core.color.flag-red}"},
+          "destructive": {"$value":"{core.color.error}"},
           "destructive-foreground": {"$value":"{core.color.on-primary}"},
           "sidebar-background": {"$value":"{core.color.dark-canvas}"},
           "sidebar-border": {"$value":"{core.color.dark-seam}"},
           "user-bubble": {"$value":"{core.color.dark-canvas-soft-2}"},
-          "user-bubble-border": {"$value":"{core.color.dark-line}"},
-          "medallion": {"$value":"{core.color.dark-verde-vivo}"}
+          "user-bubble-border": {"$value":"{core.color.dark-line}"}
         }
       },
       "radius": {
@@ -1111,32 +1115,6 @@ The private source entry imports all three generated files, and the package buil
 
 `npm run build` also writes the two DTCG artifacts above and `dist/tailwind/nadicode.tailwind.json` as generated, tracked data artifacts, and bakes `dist/icons/` from the pinned `lucide-static` dependency. The Tailwind export stays for what it uniquely supplies: the typography line-height with its declared unit, which the DTCG composite normaliser strips, and the logo paint lookup.
 
-#### Brand media authority
-
-The NadicodeAI logo has three approved forms:
-
-1. **Horizontal lockup.** One interlocked-link mark followed by one NadicodeAI wordmark. The mark sits on the left, is scaled to the wordmark's capital height, and shares its baseline. Use this form when a company identifier needs both the mark and the readable name.
-2. **Mark.** The two interlocked rounded-square links may stand alone where space is tight: favicons, app icons, avatars, watermarks, stamps, and compact navigation. A containing link or control names NadicodeAI when the mark is used without visible text.
-3. **Wordmark.** The NadicodeAI letterforms may stand alone where the name must read by itself, including document headers and editorial layouts.
-
-Other companies' marks are not NadicodeAI company logos and are not governed by anything in this section. They are generated identity images owned by `@nadicodeai/ui/components/brand-icons`; [`packages/ui/docs/contract.md`](../ui/docs/contract.md) carries their rules. A third-party mark never enters a NadicodeAI logo form, composition, or clear-space measurement.
-
-Nadia's portrait, Agent identity visuals, and generated imagery are not NadicodeAI company logos. Nadia's identity and selection rules live in [`brand/AGENTS.md`](../../brand/AGENTS.md); the Agent identity system lives in [`packages/ui/docs/agent-visual.md`](../ui/docs/agent-visual.md); editorial imagery routes through [`skills/marketing/blog-imagegen/references/editorial-register.md`](../../skills/marketing/blog-imagegen/references/editorial-register.md). This contract owns only the package delivery interface.
-
-The approved transparent Nadia master ships at `assets/nadia-solid-surface`. The package also delivers the three remaining material states as compatibility routes: `assets/nadia-ordered-points`, `assets/nadia-triangulated-wire`, and `assets/nadia-irregular-particles`. Package delivery does not grant brand approval; which Nadia image a surface may use stays with the identity document named above.
-
-All three forms derive from one authored, framework-neutral geometry source exported as `@nadicodeai/design-system/assets/logo-geometry`. The lockup combines the shared mark and wordmark geometry at the established proportion and spacing. No SVG, React component, favicon, document, or app re-authors, traces, typesets, or rearranges those shapes.
-
-Use the positive form on `{colors.canvas}` and the soft neutral canvases: ink letterforms and link with the primary verde link and `AI` suffix. Use the inverse form on `{colors.identity-ink}`: `{colors.identity-white}` letterforms and link with the dark-primary verde link and `AI` suffix. On `{colors.identity-verde}`, use the supplied on-verde form with one ink link and one white link. On photography, place the logo in a quiet area or over a scrim that keeps every part legible; when neither is available, mount it on an approved solid field. One surface uses one treatment.
-
-The clear-space unit is the rendered width of one link stroke in the mark. Keep at least one unit free on every side of the mark and lockup, with no text, rule, image, or container edge inside it. A wordmark used alone keeps the same unit that the mark would have at the wordmark's capital height. Minimum rendered sizes are 16 CSS pixels or 5 mm for the mark, 130 CSS pixels or 32 mm wide for the lockup, and 96 CSS pixels or 25 mm wide for the wordmark. Browser and operating-system icon slots use the supplied favicon or app-icon files at the platform's required size and are exempt from the screen minimum. Never compress, crop, or distort a logo to fit.
-
-For a meaningful standalone image, use the accessible name `NadicodeAI`; the accessible name is the label that identifies an image, link, or control to assistive technology. When a containing link or control already has that accessible name, hide the logo image from assistive technology with empty alt text. Never repeat the same accessible name on both the container and the image.
-
-Do not redraw, retype, reorder, stretch, crop, rotate, recolor, outline, shadow, animate, or add effects or gradients to a logo form. Do not flatten the over-under interlock, add a third link, alter the proportions or lockup spacing, stack the forms, embed the mark inside the wordmark, place the mark after the wordmark, combine it with another mark, or substitute Nadia imagery for it.
-
-The package build renders and publicly exports full-colour, mono-ink, inverse, and on-verde SVG and transparent PNG files for the lockup, mark, and wordmark from the geometry and current `colors.*` contract. React consumers use `BrandLockup`, `BrandMark`, or `BrandWordmark` according to the roles above. The operator-only favicon generator wraps the same mark geometry in the platform tile and may adapt tile radius, output size, and fixed-tile paint roles; it does not substitute another mark. Private geometry templates do not ship. A contract or geometry change is completed by regeneration, never by repainting an output or updating a fallback by hand.
-
 ### Enforcement
 
 Correctness is structural, not a byte snapshot: `scripts/sd/design-tokens-fence.test.ts` verifies the fence reader, one fence, strict JSON, typed leaves, legal names; `scripts/sd/compose-token-graph.test.ts` verifies the composition, one construction of the root, alias rewriting, ownership and reference direction, extension preservation, and the CSS projection; `tests/guards/dtcg-shape.test.ts` verifies both published artifacts against the vendored DTCG schema and the Nadicode profile; `tests/guards/token-structural-parity.test.ts` verifies the complete `--nc-*` projection; `tests/guards/tailwind-v4-theme.test.ts` verifies mode-pair derivation, `@theme` values, and light/dark role integrity; `tests/guards/component-contract-matches-css.test.ts` verifies the retained CSS component surface against this contract; `tests/guards/css-bundle.test.ts` verifies the public artifact is flat, complete, and contains no shipped partials; and `tests/guards/consumer-css-discipline.test.ts` verifies reference integrity, the absence of raw color literals in the hand-authored kit CSS and of raw color and radius literals in `examples/`, second value sources, and DTCG drift. These guards read freshly built output (the test global-setup rebuilds before any of them run), so they prove the generator; a hand-edited or stale committed generated file is caught by the CI cleanliness step in the `design-system` job, which requires a fresh build to reproduce the committed bytes exactly, with `dist/favicon/**` outside it, regenerated only by `generate:favicons` and fenced by review rather than machinery. Cross-package guards verify that React callers use only the React stylesheet interface.

package/dist/css/index.css

@@ -77,7 +77,6 @@
     --nc-warning: oklch(0.8466 0.1678 84.63);
     --nc-warning-soft: oklch(0.9649 0.0461 90.87);
     --nc-warning-deep: oklch(0.4834 0.0995 82.44);
-    --nc-flag-red: oklch(0.5688 0.1995 26.59);
     --nc-verde-vivo: oklch(0.5604 0.1485 151.68);
     --nc-selection-bg: oklch(0.1776 0.0000 0.00);
     --nc-selection-fg: oklch(0.9851 0.0000 0.00);
@@ -89,8 +88,6 @@
     --nc-state-review: oklch(0.8466 0.1678 84.63);
     --nc-state-blocked: oklch(0.5688 0.1995 26.59);
     --nc-state-complete: oklch(0.6415 0.1644 153.23);
-    --nc-background-100: oklch(1.0000 0.0000 0.00);
-    --nc-background-200: oklch(0.9851 0.0000 0.00);
     --nc-identity-verde: oklch(0.6415 0.1644 153.23);
     --nc-identity-rosso: oklch(0.5688 0.1995 26.59);
     --nc-identity-arancio: oklch(0.6824 0.2108 37.70);
@@ -143,9 +140,6 @@
     --nc-dark-info: oklch(0.7067 0.1528 272.08);
     --nc-dark-info-soft: oklch(0.2118 0.1033 268.28);
     --nc-dark-info-deep: oklch(0.8222 0.0888 274.44);
-    --nc-dark-cyan: oklch(0.7820 0.1247 190.99);
-    --nc-dark-cyan-soft: oklch(0.8646 0.1000 187.55);
-    --nc-dark-cyan-deep: oklch(0.6347 0.1029 191.54);
     --nc-dark-success: oklch(0.7019 0.1753 153.20);
     --nc-dark-success-soft: oklch(0.2893 0.0697 156.32);
     --nc-dark-success-deep: oklch(0.8524 0.0996 159.83);
@@ -670,7 +664,7 @@
     --sidebar-border: var(--nc-dark-line);
     --sidebar-ring: var(--nc-dark-focus-ring);
   }
-  @theme { --color-*: initial; --color-nc-primary: oklch(0.5075 0.1338 151.91); --color-nc-on-primary: oklch(1.0000 0.0000 0.00); --color-nc-action: oklch(0.1776 0.0000 0.00); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.3012 0.0000 0.00); --color-nc-action-active: oklch(0.0000 0.0000 0.00); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-seam: oklch(0.8699 0.0000 0.00); --color-nc-cross: oklch(0.6830 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-accent: oklch(0.6824 0.2108 37.70); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-flag-red: oklch(0.5688 0.1995 26.59); --color-nc-verde-vivo: oklch(0.5604 0.1485 151.68); --color-nc-selection-bg: oklch(0.1776 0.0000 0.00); --color-nc-selection-fg: oklch(0.9851 0.0000 0.00); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-background-100: oklch(1.0000 0.0000 0.00); --color-nc-background-200: oklch(0.9851 0.0000 0.00); --color-nc-identity-verde: oklch(0.6415 0.1644 153.23); --color-nc-identity-rosso: oklch(0.5688 0.1995 26.59); --color-nc-identity-arancio: oklch(0.6824 0.2108 37.70); --color-nc-identity-giallo: oklch(0.8466 0.1678 84.63); --color-nc-identity-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-identity-ink: oklch(0.0000 0.0000 0.00); --color-nc-identity-white: oklch(1.0000 0.0000 0.00); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-chart-seq-1: oklch(0.6998 0.1347 269.48); --color-nc-chart-seq-2: oklch(0.5724 0.1897 270.11); --color-nc-chart-seq-3: oklch(0.4725 0.2271 267.41); --color-nc-chart-seq-4: oklch(0.3989 0.1934 267.50); --color-nc-chart-seq-5: oklch(0.3270 0.1487 267.91); --color-nc-chart-div-warm: oklch(0.7592 0.1560 83.30); --color-nc-chart-div-mid: oklch(0.5278 0.0000 0.00); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-seam: oklch(0.2178 0.0000 0.00); --color-nc-dark-primary: oklch(0.7727 0.1753 155.96); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(1.0000 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.9189 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8761 0.0000 0.00); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-cyan: oklch(0.7820 0.1247 190.99); --color-nc-dark-cyan-soft: oklch(0.8646 0.1000 187.55); --color-nc-dark-cyan-deep: oklch(0.6347 0.1029 191.54); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-dark-selection-fg: oklch(0.1448 0.0000 0.00); --color-nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-cross: oklch(0.4495 0.0000 0.00); --color-nc-dark-verde-vivo: oklch(0.7868 0.1398 156.43); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --color-nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11); --color-nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48); --color-nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44); --color-nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78); --color-nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31); --color-nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00); --color-nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-button-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-button-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -1.5px; --tracking-display-xl: -1.5px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1px; --tracking-display-lg: -1px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 24px; --text-display-md--line-height: 32px; --leading-display-md: 32px; --text-display-md--letter-spacing: 0px; --tracking-display-md: 0px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-display-sm: 20px; --text-display-sm--line-height: 28px; --leading-display-sm: 28px; --text-display-sm--letter-spacing: 0px; --tracking-display-sm: 0px; --text-display-sm--font-weight: 600; --font-weight-display-sm: 600; --text-title-lg: 40px; --text-title-lg--line-height: 41px; --leading-title-lg: 41px; --text-title-lg--letter-spacing: 0px; --tracking-title-lg: 0px; --text-title-lg--font-weight: 600; --font-weight-title-lg: 600; --text-title-md: 30px; --text-title-md--line-height: 32px; --leading-title-md: 32px; --text-title-md--letter-spacing: 0px; --tracking-title-md: 0px; --text-title-md--font-weight: 600; --font-weight-title-md: 600; --text-title-sm: 22px; --text-title-sm--line-height: 25px; --leading-title-sm: 25px; --text-title-sm--letter-spacing: 0px; --tracking-title-sm: 0px; --text-title-sm--font-weight: 600; --font-weight-title-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-md-strong: 16px; --text-body-md-strong--line-height: 24px; --leading-body-md-strong: 24px; --text-body-md-strong--letter-spacing: 0px; --tracking-body-md-strong: 0px; --text-body-md-strong--font-weight: 500; --font-weight-body-md-strong: 500; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-body-sm-strong: 14px; --text-body-sm-strong--line-height: 20px; --leading-body-sm-strong: 20px; --text-body-sm-strong--letter-spacing: 0px; --tracking-body-sm-strong: 0px; --text-body-sm-strong--font-weight: 500; --font-weight-body-sm-strong: 500; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-caption-strong: 12px; --text-caption-strong--line-height: 16px; --leading-caption-strong: 16px; --text-caption-strong--letter-spacing: 0px; --tracking-caption-strong: 0px; --text-caption-strong--font-weight: 500; --font-weight-caption-strong: 500; --text-caption-mono: 12px; --text-caption-mono--line-height: 16px; --leading-caption-mono: 16px; --text-caption-mono--letter-spacing: 0px; --tracking-caption-mono: 0px; --text-caption-mono--font-weight: 500; --font-weight-caption-mono: 500; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-button-md: 14px; --text-button-md--line-height: 18px; --leading-button-md: 18px; --text-button-md--letter-spacing: 0px; --tracking-button-md: 0px; --text-button-md--font-weight: 500; --font-weight-button-md: 500; --text-button-lg: 16px; --text-button-lg--line-height: 24px; --leading-button-lg: 24px; --text-button-lg--letter-spacing: 0px; --tracking-button-lg: 0px; --text-button-lg--font-weight: 500; --font-weight-button-lg: 500; --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-pill-sm: 64px; --radius-pill: 100px; --radius-full: 9999px; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.6px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-section: 192px; --spacing-nadicode-page-pad: 24px; --spacing-nadicode-page-max-mobile: 448px; --spacing-nadicode-page-max-tablet: 624px; --spacing-nadicode-page-max-desktop: 1440px; --spacing-nadicode-frame-max: 1392px; --spacing-nadicode-frame-gap: 24px; --spacing-nadicode-cell-padding: 24px; --spacing-nadicode-section-gap: 48px; --spacing-nadicode-cross-size-mobile: 11px; --spacing-nadicode-cross-size-tablet: 15px; --spacing-nadicode-cross-size-desktop: 21px; --spacing-nadicode-h-strip-mobile: 72px; --spacing-nadicode-h-strip-tablet: 80px; --spacing-nadicode-h-strip-desktop: 88px; --spacing-nadicode-h-cell-sm: 120px; --spacing-nadicode-h-cell-md-mobile: 144px; --spacing-nadicode-h-cell-md-tablet: 160px; --spacing-nadicode-h-cell-md-desktop: 168px; --spacing-nadicode-h-cell-lg-mobile: 220px; --spacing-nadicode-h-cell-lg-desktop: 240px; --spacing-nadicode-h-visual-mobile: 276px; --spacing-nadicode-h-visual-tablet: 318px; --spacing-nadicode-h-visual-desktop: 360px; --spacing-nadicode-h-precision-mobile: 276px; --spacing-nadicode-h-precision-tablet: 480px; --spacing-nadicode-h-precision-desktop: 720px; --spacing-nadicode-h-hero-mobile: 560px; --spacing-nadicode-h-hero-desktop: 720px; --spacing-nadicode-h-action-strip-mobile: 20px; --spacing-nadicode-h-action-strip-desktop: 32px; --spacing-nadicode-h-action-body-mobile: 320px; --spacing-nadicode-h-action-body-tablet: 338px; --spacing-nadicode-h-action-band: 260px; --spacing-nadicode-h-feature-mobile: 360px; --spacing-nadicode-h-feature-tablet: 400px; --spacing-nadicode-h-feature-desktop: 456px; --spacing-nadicode-h-editorial-feature-mobile: 360px; --spacing-nadicode-h-editorial-feature-tablet: 440px; --spacing-nadicode-h-editorial-feature-desktop: 560px; --spacing-nadicode-h-bento-primary: 384px; --spacing-nadicode-h-bento-secondary: 240px; --spacing-nadicode-h-bento-mobile-copy: 248px; --spacing-nadicode-h-bento-mobile-main: 537px; --spacing-nadicode-h-bento-strip: 20px; --spacing-nadicode-filter-chip-gap: 6px; --spacing-nadicode-filter-chip-height: 28px; --spacing-nadicode-filter-chip-icon: 14px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
+  @theme { --color-*: initial; --color-nc-primary: oklch(0.5075 0.1338 151.91); --color-nc-on-primary: oklch(1.0000 0.0000 0.00); --color-nc-action: oklch(0.1776 0.0000 0.00); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.3012 0.0000 0.00); --color-nc-action-active: oklch(0.0000 0.0000 0.00); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-seam: oklch(0.8699 0.0000 0.00); --color-nc-cross: oklch(0.6830 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-accent: oklch(0.6824 0.2108 37.70); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-verde-vivo: oklch(0.5604 0.1485 151.68); --color-nc-selection-bg: oklch(0.1776 0.0000 0.00); --color-nc-selection-fg: oklch(0.9851 0.0000 0.00); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-identity-verde: oklch(0.6415 0.1644 153.23); --color-nc-identity-rosso: oklch(0.5688 0.1995 26.59); --color-nc-identity-arancio: oklch(0.6824 0.2108 37.70); --color-nc-identity-giallo: oklch(0.8466 0.1678 84.63); --color-nc-identity-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-identity-ink: oklch(0.0000 0.0000 0.00); --color-nc-identity-white: oklch(1.0000 0.0000 0.00); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-chart-seq-1: oklch(0.6998 0.1347 269.48); --color-nc-chart-seq-2: oklch(0.5724 0.1897 270.11); --color-nc-chart-seq-3: oklch(0.4725 0.2271 267.41); --color-nc-chart-seq-4: oklch(0.3989 0.1934 267.50); --color-nc-chart-seq-5: oklch(0.3270 0.1487 267.91); --color-nc-chart-div-warm: oklch(0.7592 0.1560 83.30); --color-nc-chart-div-mid: oklch(0.5278 0.0000 0.00); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-seam: oklch(0.2178 0.0000 0.00); --color-nc-dark-primary: oklch(0.7727 0.1753 155.96); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(1.0000 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.9189 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8761 0.0000 0.00); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-dark-selection-fg: oklch(0.1448 0.0000 0.00); --color-nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-cross: oklch(0.4495 0.0000 0.00); --color-nc-dark-verde-vivo: oklch(0.7868 0.1398 156.43); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --color-nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11); --color-nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48); --color-nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44); --color-nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78); --color-nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31); --color-nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00); --color-nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-button-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-button-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -1.5px; --tracking-display-xl: -1.5px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1px; --tracking-display-lg: -1px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 24px; --text-display-md--line-height: 32px; --leading-display-md: 32px; --text-display-md--letter-spacing: 0px; --tracking-display-md: 0px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-display-sm: 20px; --text-display-sm--line-height: 28px; --leading-display-sm: 28px; --text-display-sm--letter-spacing: 0px; --tracking-display-sm: 0px; --text-display-sm--font-weight: 600; --font-weight-display-sm: 600; --text-title-lg: 40px; --text-title-lg--line-height: 41px; --leading-title-lg: 41px; --text-title-lg--letter-spacing: 0px; --tracking-title-lg: 0px; --text-title-lg--font-weight: 600; --font-weight-title-lg: 600; --text-title-md: 30px; --text-title-md--line-height: 32px; --leading-title-md: 32px; --text-title-md--letter-spacing: 0px; --tracking-title-md: 0px; --text-title-md--font-weight: 600; --font-weight-title-md: 600; --text-title-sm: 22px; --text-title-sm--line-height: 25px; --leading-title-sm: 25px; --text-title-sm--letter-spacing: 0px; --tracking-title-sm: 0px; --text-title-sm--font-weight: 600; --font-weight-title-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-md-strong: 16px; --text-body-md-strong--line-height: 24px; --leading-body-md-strong: 24px; --text-body-md-strong--letter-spacing: 0px; --tracking-body-md-strong: 0px; --text-body-md-strong--font-weight: 500; --font-weight-body-md-strong: 500; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-body-sm-strong: 14px; --text-body-sm-strong--line-height: 20px; --leading-body-sm-strong: 20px; --text-body-sm-strong--letter-spacing: 0px; --tracking-body-sm-strong: 0px; --text-body-sm-strong--font-weight: 500; --font-weight-body-sm-strong: 500; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-caption-strong: 12px; --text-caption-strong--line-height: 16px; --leading-caption-strong: 16px; --text-caption-strong--letter-spacing: 0px; --tracking-caption-strong: 0px; --text-caption-strong--font-weight: 500; --font-weight-caption-strong: 500; --text-caption-mono: 12px; --text-caption-mono--line-height: 16px; --leading-caption-mono: 16px; --text-caption-mono--letter-spacing: 0px; --tracking-caption-mono: 0px; --text-caption-mono--font-weight: 500; --font-weight-caption-mono: 500; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-button-md: 14px; --text-button-md--line-height: 18px; --leading-button-md: 18px; --text-button-md--letter-spacing: 0px; --tracking-button-md: 0px; --text-button-md--font-weight: 500; --font-weight-button-md: 500; --text-button-lg: 16px; --text-button-lg--line-height: 24px; --leading-button-lg: 24px; --text-button-lg--letter-spacing: 0px; --tracking-button-lg: 0px; --text-button-lg--font-weight: 500; --font-weight-button-lg: 500; --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-pill-sm: 64px; --radius-pill: 100px; --radius-full: 9999px; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.6px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-section: 192px; --spacing-nadicode-page-pad: 24px; --spacing-nadicode-page-max-mobile: 448px; --spacing-nadicode-page-max-tablet: 624px; --spacing-nadicode-page-max-desktop: 1440px; --spacing-nadicode-frame-max: 1392px; --spacing-nadicode-frame-gap: 24px; --spacing-nadicode-cell-padding: 24px; --spacing-nadicode-section-gap: 48px; --spacing-nadicode-cross-size-mobile: 11px; --spacing-nadicode-cross-size-tablet: 15px; --spacing-nadicode-cross-size-desktop: 21px; --spacing-nadicode-h-strip-mobile: 72px; --spacing-nadicode-h-strip-tablet: 80px; --spacing-nadicode-h-strip-desktop: 88px; --spacing-nadicode-h-cell-sm: 120px; --spacing-nadicode-h-cell-md-mobile: 144px; --spacing-nadicode-h-cell-md-tablet: 160px; --spacing-nadicode-h-cell-md-desktop: 168px; --spacing-nadicode-h-cell-lg-mobile: 220px; --spacing-nadicode-h-cell-lg-desktop: 240px; --spacing-nadicode-h-visual-mobile: 276px; --spacing-nadicode-h-visual-tablet: 318px; --spacing-nadicode-h-visual-desktop: 360px; --spacing-nadicode-h-precision-mobile: 276px; --spacing-nadicode-h-precision-tablet: 480px; --spacing-nadicode-h-precision-desktop: 720px; --spacing-nadicode-h-hero-mobile: 560px; --spacing-nadicode-h-hero-desktop: 720px; --spacing-nadicode-h-action-strip-mobile: 20px; --spacing-nadicode-h-action-strip-desktop: 32px; --spacing-nadicode-h-action-body-mobile: 320px; --spacing-nadicode-h-action-body-tablet: 338px; --spacing-nadicode-h-action-band: 260px; --spacing-nadicode-h-feature-mobile: 360px; --spacing-nadicode-h-feature-tablet: 400px; --spacing-nadicode-h-feature-desktop: 456px; --spacing-nadicode-h-editorial-feature-mobile: 360px; --spacing-nadicode-h-editorial-feature-tablet: 440px; --spacing-nadicode-h-editorial-feature-desktop: 560px; --spacing-nadicode-h-bento-primary: 384px; --spacing-nadicode-h-bento-secondary: 240px; --spacing-nadicode-h-bento-mobile-copy: 248px; --spacing-nadicode-h-bento-mobile-main: 537px; --spacing-nadicode-h-bento-strip: 20px; --spacing-nadicode-filter-chip-gap: 6px; --spacing-nadicode-filter-chip-height: 28px; --spacing-nadicode-filter-chip-icon: 14px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
   @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-primary-active: var(--primary-active); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-placeholder: var(--placeholder); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-scrim: var(--scrim); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-hover: var(--sidebar-primary-hover); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); }
 }
 

package/dist/css/tokens.css

@@ -77,7 +77,6 @@
     --nc-warning: oklch(0.8466 0.1678 84.63);
     --nc-warning-soft: oklch(0.9649 0.0461 90.87);
     --nc-warning-deep: oklch(0.4834 0.0995 82.44);
-    --nc-flag-red: oklch(0.5688 0.1995 26.59);
     --nc-verde-vivo: oklch(0.5604 0.1485 151.68);
     --nc-selection-bg: oklch(0.1776 0.0000 0.00);
     --nc-selection-fg: oklch(0.9851 0.0000 0.00);
@@ -89,8 +88,6 @@
     --nc-state-review: oklch(0.8466 0.1678 84.63);
     --nc-state-blocked: oklch(0.5688 0.1995 26.59);
     --nc-state-complete: oklch(0.6415 0.1644 153.23);
-    --nc-background-100: oklch(1.0000 0.0000 0.00);
-    --nc-background-200: oklch(0.9851 0.0000 0.00);
     --nc-identity-verde: oklch(0.6415 0.1644 153.23);
     --nc-identity-rosso: oklch(0.5688 0.1995 26.59);
     --nc-identity-arancio: oklch(0.6824 0.2108 37.70);
@@ -143,9 +140,6 @@
     --nc-dark-info: oklch(0.7067 0.1528 272.08);
     --nc-dark-info-soft: oklch(0.2118 0.1033 268.28);
     --nc-dark-info-deep: oklch(0.8222 0.0888 274.44);
-    --nc-dark-cyan: oklch(0.7820 0.1247 190.99);
-    --nc-dark-cyan-soft: oklch(0.8646 0.1000 187.55);
-    --nc-dark-cyan-deep: oklch(0.6347 0.1029 191.54);
     --nc-dark-success: oklch(0.7019 0.1753 153.20);
     --nc-dark-success-soft: oklch(0.2893 0.0697 156.32);
     --nc-dark-success-deep: oklch(0.8524 0.0996 159.83);

package/dist/tailwind/nadicode.tailwind.json

@@ -38,7 +38,6 @@
         "warning": "#ffc220",
         "warning-soft": "#fff3d1",
         "warning-deep": "#7a5800",
-        "flag-red": "#d3302f",
         "verde-vivo": "#008c45",
         "selection-bg": "#111111",
         "selection-fg": "#fafafa",
@@ -50,8 +49,6 @@
         "state-review": "#ffc220",
         "state-blocked": "#d3302f",
         "state-complete": "#00a85a",
-        "background-100": "#ffffff",
-        "background-200": "#fafafa",
         "identity-verde": "#00a85a",
         "identity-rosso": "#d3302f",
         "identity-arancio": "#ff5a1f",
@@ -104,9 +101,6 @@
         "dark-info": "#8098ff",
         "dark-info-soft": "#070f47",
         "dark-info-deep": "#b3c1ff",
-        "dark-cyan": "#33d1cb",
-        "dark-cyan-soft": "#7ee8de",
-        "dark-cyan-deep": "#1f9e9a",
         "dark-success": "#17bd68",
         "dark-success-soft": "#00351c",
         "dark-success-deep": "#93e3b8",

package/dist/tokens/nadicode.dtcg-resolved.json

@@ -401,17 +401,6 @@
             "hex": "#7a5800"
           }
         },
-        "flag-red": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              0.827,
-              0.188,
-              0.184
-            ],
-            "hex": "#d3302f"
-          }
-        },
         "verde-vivo": {
           "$value": {
             "colorSpace": "srgb",
@@ -533,28 +522,6 @@
             "hex": "#00a85a"
           }
         },
-        "background-100": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              1,
-              1,
-              1
-            ],
-            "hex": "#ffffff"
-          }
-        },
-        "background-200": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              0.98,
-              0.98,
-              0.98
-            ],
-            "hex": "#fafafa"
-          }
-        },
         "identity-verde": {
           "$value": {
             "colorSpace": "srgb",
@@ -1127,39 +1094,6 @@
             "hex": "#b3c1ff"
           }
         },
-        "dark-cyan": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              0.2,
-              0.82,
-              0.796
-            ],
-            "hex": "#33d1cb"
-          }
-        },
-        "dark-cyan-soft": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              0.494,
-              0.91,
-              0.871
-            ],
-            "hex": "#7ee8de"
-          }
-        },
-        "dark-cyan-deep": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              0.122,
-              0.62,
-              0.604
-            ],
-            "hex": "#1f9e9a"
-          }
-        },
         "dark-success": {
           "$value": {
             "colorSpace": "srgb",
@@ -4017,17 +3951,6 @@
                 ],
                 "hex": "#e5e5e5"
               }
-            },
-            "medallion": {
-              "$value": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0.549,
-                  0.271
-                ],
-                "hex": "#008c45"
-              }
             }
           },
           "dark": {
@@ -4306,17 +4229,6 @@
                 ],
                 "hex": "#262626"
               }
-            },
-            "medallion": {
-              "$value": {
-                "colorSpace": "srgb",
-                "components": [
-                  0.384,
-                  0.831,
-                  0.58
-                ],
-                "hex": "#62d494"
-              }
             }
           }
         },

package/dist/tokens/nadicode.dtcg.json

@@ -401,17 +401,6 @@
             "hex": "#7a5800"
           }
         },
-        "flag-red": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              0.827,
-              0.188,
-              0.184
-            ],
-            "hex": "#d3302f"
-          }
-        },
         "verde-vivo": {
           "$value": {
             "colorSpace": "srgb",
@@ -533,28 +522,6 @@
             "hex": "#00a85a"
           }
         },
-        "background-100": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              1,
-              1,
-              1
-            ],
-            "hex": "#ffffff"
-          }
-        },
-        "background-200": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              0.98,
-              0.98,
-              0.98
-            ],
-            "hex": "#fafafa"
-          }
-        },
         "identity-verde": {
           "$value": {
             "colorSpace": "srgb",
@@ -1127,39 +1094,6 @@
             "hex": "#b3c1ff"
           }
         },
-        "dark-cyan": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              0.2,
-              0.82,
-              0.796
-            ],
-            "hex": "#33d1cb"
-          }
-        },
-        "dark-cyan-soft": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              0.494,
-              0.91,
-              0.871
-            ],
-            "hex": "#7ee8de"
-          }
-        },
-        "dark-cyan-deep": {
-          "$value": {
-            "colorSpace": "srgb",
-            "components": [
-              0.122,
-              0.62,
-              0.604
-            ],
-            "hex": "#1f9e9a"
-          }
-        },
         "dark-success": {
           "$value": {
             "colorSpace": "srgb",
@@ -3817,9 +3751,6 @@
             },
             "user-bubble-border": {
               "$value": "{nadicode.core.color.line}"
-            },
-            "medallion": {
-              "$value": "{nadicode.core.color.verde-vivo}"
             }
           },
           "dark": {
@@ -3882,7 +3813,7 @@
               "$value": "{nadicode.core.color.dark-focus-ring}"
             },
             "destructive": {
-              "$value": "{nadicode.core.color.flag-red}"
+              "$value": "{nadicode.core.color.error}"
             },
             "destructive-foreground": {
               "$value": "{nadicode.core.color.on-primary}"
@@ -3898,9 +3829,6 @@
             },
             "user-bubble-border": {
               "$value": "{nadicode.core.color.dark-line}"
-            },
-            "medallion": {
-              "$value": "{nadicode.core.color.dark-verde-vivo}"
             }
           }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "5.3.6",
+  "version": "6.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -121,18 +121,6 @@
       "types": "./src/assets/nadia-asset.d.ts",
       "default": "./dist/assets/nadia-01-solid-surface.png"
     },
-    "./assets/nadia-ordered-points": {
-      "types": "./src/assets/nadia-asset.d.ts",
-      "default": "./dist/assets/nadia-02-ordered-points.png"
-    },
-    "./assets/nadia-triangulated-wire": {
-      "types": "./src/assets/nadia-asset.d.ts",
-      "default": "./dist/assets/nadia-03-triangulated-wire.png"
-    },
-    "./assets/nadia-irregular-particles": {
-      "types": "./src/assets/nadia-asset.d.ts",
-      "default": "./dist/assets/nadia-04-irregular-particles.png"
-    },
     "./assets/fonts/geist.css": "./src/assets/fonts/geist.css",
     "./assets/fonts/*": "./src/assets/fonts/*"
   },
@@ -167,7 +155,7 @@
     "@google/design.md": "0.4.0",
     "@nadicodeai/eslint-plugin": "*",
     "@playwright/test": "^1.63.0",
-    "@types/node": "^22",
+    "@types/node": "^24",
     "ajv": "8.20.0",
     "ajv-formats": "3.0.1",
     "esbuild": "^0.28.2",