@deriv-ds/design-intelligence-layer 0.4.3 → 0.4.5

package/guides/design-system-guide/deriv-design-intelligence-guide.md

@@ -59,7 +59,7 @@ Token rules apply ONLY to:
 ### Rule 4 — Do NOT install or import these separately
 
 ```
-❌ lucide-react — already bundled in the npm package
+❌ lucide-react or any icon library — icons come from FontAwesome Pro via the package's <Icon /> component (see icon-reference.md in this folder)
 ❌ tailwindcss — the package ships its own Tailwind v4 config
 ❌ @apply with hsl(var(--token)) — Tailwind v4 uses CSS variables directly
 ❌ tailwind.config.js — configuration is handled by the package via CSS
@@ -612,9 +612,9 @@ Landing page hero sections in multiple layout types.
 |---------|-------------|
 | Type 1 — Desktop | Two columns: tagline pill + heading + body + Get started / Learn more CTAs left; square image panel right |
 | Type 1 — Mobile | Single column stacked: text content centred above, image panel full-width below |
-| Type 2 — Desktop | Centred single-column: tagline pill + heading + body + single primary CTA with `ArrowRight` icon; no image |
+| Type 2 — Desktop | Centred single-column: tagline pill + heading + body + single primary CTA with `<Icon name="arrow-right" />`; no image |
 
-**Components used:** `Button` (default `sm`, `secondary sm`); `ArrowUpRight`, `ArrowRight` icons (lucide)
+**Components used:** `Button` (default `sm`, `secondary sm`); `<Icon name="arrow-up-right" />`, `<Icon name="arrow-right" />` (FontAwesome Pro via the `Icon` component)
 
 **Tokens used:** `bg-prominent`, `bg-subtle`, `border-border-subtle`, `text-on-prominent`, `text-on-subtle`, `bg-semantic-win`, `rounded-xl`, `rounded-full`, `px-layout-margin-inline`, `gap-layout-gutter`, `py-24`, `text-5xl`, `font-semibold`, `font-display`, `tracking-tight`, `text-lg`, `font-body`, `text-sm`, `shadow-sm`, `max-w-2xl`
 
@@ -636,7 +636,7 @@ Landing page hero sections in multiple layout types.
 | Using standard TW sizes for headings (e.g. `text-6xl` = 60px) | Use design system values (`text-6xl` = 64px in this system) |
 | Forgetting responsive heading sizes | Headings scale down on mobile (see Section 4.2) |
 | Using `rounded-[4px]` or `rounded-[2px]` | Use `rounded-xs` (4px) or `rounded-2xs` (2px) |
-| Installing `lucide-react` separately | Already bundled — import icons directly |
+| Installing or importing `lucide-react` | Use `<Icon name="..." weight="..." />` (FontAwesome Pro) — catalog in `icon-reference.md` |
 | Adding `tailwind.config.js` | Tailwind v4 uses CSS config via the package |
 | Using `bg-gray-*`, `text-zinc-*`, etc. | Use semantic tokens only |
 

package/guides/design-system-guide/icon-reference.md

@@ -0,0 +1,202 @@
+<!-- AUTO-GENERATED by scripts/generate-icon-reference.mjs — do not edit by hand.
+     Regenerate with: npm run build && npm run generate:icon-reference -->
+
+# Icon reference — FontAwesome Pro via `<Icon />`
+
+The design system's only icon source. **Never install or import `lucide-react`** or any other icon library — every icon below ships with the package.
+
+## Usage
+
+```tsx
+import { Icon } from "@deriv-ds/design-intelligence-layer";
+
+// Default weight (bold = medium outline)
+<Icon name="bell" />
+
+// Explicit weight + styling via className
+<Icon name="circle-check" weight="fill" className="size-4 text-success" />
+<Icon name="user"         weight="regular" className="text-subtle" />
+```
+
+When a component prop expects `icon: React.ElementType`, wrap with an arrow function:
+
+```tsx
+icon: ({ className }: { className?: string }) => <Icon name="plus" weight="fill" className={className} />
+```
+
+At runtime you can introspect the catalog: `ICON_NAMES` (all names) and `iconAvailableWeights(name)` are exported from the package.
+
+## Choosing a weight
+
+| weight | appearance | when to use |
+|---|---|---|
+| `"regular"` | thin / light | unselected nav items, subtle indicators |
+| `"bold"` | medium outline **(default)** | most UI icons |
+| `"fill"` | solid / filled | selected nav items, strong actions |
+
+Navigation pattern: render `weight="regular"` for the unselected state and `weight="fill"` for the selected state of the same icon.
+
+## Choosing an icon — semantic conventions
+
+Use these established mappings before picking something else, so the same intent always gets the same icon:
+
+| intent | icon | weight |
+|---|---|---|
+| Trade action / CFDs nav | `chart-candlestick` | bold (selected nav: bold) |
+| Transfer between accounts | `arrow-right-arrow-left` | bold |
+| Deposit / add | `plus` | fill |
+| Withdraw / remove | `minus` | fill |
+| Convert | `arrows-left-right` | bold |
+| Home nav | `house-blank` | regular / fill (selected) |
+| Options nav | `options` | regular / fill (selected) |
+| Portfolio / wallet nav | `wallet` | regular / fill (selected) |
+| Refresh / reload | `rotate-right` | fill |
+| Show / hide value | `eye` / `eye-slash` | bold |
+| Back navigation | `arrow-left` | bold |
+| Forward / drill-in | `chevron-right` | bold |
+| More actions / details | `ellipsis` | bold |
+| Close / dismiss | `xmark` | bold |
+| Notifications | `bell` | bold |
+| Info message | `circle-info` | per context |
+| Success message | `circle-check` | per context |
+| Warning message | `circle-exclamation` | per context |
+| Critical / danger message | `triangle-exclamation` | per context |
+| Search | `magnifying-glass` | bold |
+
+## Full catalog (131 icons)
+
+A "—" means that weight is not mapped for the icon; passing it falls back to the `bold` glyph.
+
+| name | regular | bold | fill |
+|---|---|---|---|
+| `arrow-down-to-line` | ✓ | ✓ | ✓ |
+| `arrow-left` | ✓ | ✓ | ✓ |
+| `arrow-right` | ✓ | ✓ | ✓ |
+| `arrow-right-arrow-left` | ✓ | ✓ | ✓ |
+| `arrow-trend-down` | ✓ | ✓ | ✓ |
+| `arrow-trend-up` | ✓ | ✓ | ✓ |
+| `arrow-up-from-line` | ✓ | ✓ | ✓ |
+| `arrow-up-right` | ✓ | ✓ | ✓ |
+| `arrow-up-right-from-square` | ✓ | ✓ | ✓ |
+| `arrows-left-right` | ✓ | ✓ | ✓ |
+| `bell` | ✓ | ✓ | ✓ |
+| `book-circle-question` | ✓ | ✓ | ✓ |
+| `book-open` | ✓ | ✓ | ✓ |
+| `book-open-cover-circle-question` | ✓ | ✓ | — |
+| `box-archive-circle-arrow-down` | ✓ | ✓ | ✓ |
+| `box-archive-circle-arrow-up` | ✓ | ✓ | ✓ |
+| `brand-harmony-os` | — | ✓ | — |
+| `brand-huawei` | — | ✓ | — |
+| `brand-huawei-app-gallery` | — | ✓ | — |
+| `brand-ios` | — | ✓ | — |
+| `brand-ipados` | — | ✓ | — |
+| `brand-macos` | — | ✓ | — |
+| `brand-microsoft-store` | — | ✓ | — |
+| `brand-trustpilot` | — | ✓ | — |
+| `calculator` | ✓ | ✓ | ✓ |
+| `calendar-circle-arrow-left` | ✓ | ✓ | — |
+| `calendar-circle-arrow-right` | ✓ | ✓ | — |
+| `chart-bar` | ✓ | ✓ | ✓ |
+| `chart-candlestick` | ✓ | ✓ | ✓ |
+| `chart-line` | ✓ | ✓ | ✓ |
+| `chart-line-clock` | ✓ | ✓ | — |
+| `chart-line-up-down-clock` | ✓ | ✓ | ✓ |
+| `chart-tradingview` | ✓ | ✓ | ✓ |
+| `chart-trend-down` | ✓ | ✓ | ✓ |
+| `chart-trend-still` | ✓ | ✓ | ✓ |
+| `chart-trend-up` | ✓ | ✓ | ✓ |
+| `check` | ✓ | ✓ | ✓ |
+| `chevron-down` | ✓ | ✓ | ✓ |
+| `chevron-left` | ✓ | ✓ | ✓ |
+| `chevron-right` | ✓ | ✓ | ✓ |
+| `chevron-up` | ✓ | ✓ | ✓ |
+| `circle` | ✓ | ✓ | ✓ |
+| `circle-check` | ✓ | ✓ | ✓ |
+| `circle-exclamation` | ✓ | ✓ | ✓ |
+| `circle-info` | ✓ | ✓ | ✓ |
+| `circle-user-slash` | ✓ | ✓ | ✓ |
+| `clock-rotate-left` | ✓ | ✓ | ✓ |
+| `copy` | ✓ | ✓ | ✓ |
+| `crosshairs-slash` | ✓ | ✓ | — |
+| `deal-cancellation` | ✓ | ✓ | ✓ |
+| `deal-protection` | ✓ | ✓ | ✓ |
+| `deriv` | ✓ | ✓ | ✓ |
+| `deriv-p2p` | ✓ | ✓ | ✓ |
+| `dollar-sign` | ✓ | ✓ | ✓ |
+| `ellipsis` | ✓ | ✓ | ✓ |
+| `envelope` | ✓ | ✓ | ✓ |
+| `envelope-open` | ✓ | ✓ | ✓ |
+| `eye` | ✓ | ✓ | ✓ |
+| `eye-slash` | ✓ | ✓ | ✓ |
+| `fiat-offramp` | ✓ | ✓ | ✓ |
+| `fiat-onramp` | ✓ | ✓ | ✓ |
+| `field-password` | ✓ | ✓ | ✓ |
+| `file-lines` | ✓ | ✓ | ✓ |
+| `file-lines-magnifying-glass` | ✓ | ✓ | — |
+| `file-xmark` | ✓ | ✓ | ✓ |
+| `fingerprint` | ✓ | ✓ | ✓ |
+| `gear` | ✓ | ✓ | ✓ |
+| `grip-vertical` | ✓ | ✓ | ✓ |
+| `hand-gesture-swipe-left-right` | ✓ | ✓ | ✓ |
+| `hand-gesture-tap-left` | ✓ | ✓ | ✓ |
+| `hand-gesture-tap-right` | ✓ | ✓ | ✓ |
+| `handshake-lock` | ✓ | ✓ | — |
+| `handshake-shield` | ✓ | ✓ | — |
+| `horizontal-rule-dashed` | ✓ | ✓ | ✓ |
+| `house` | ✓ | ✓ | ✓ |
+| `house-blank` | ✓ | ✓ | ✓ |
+| `image` | ✓ | ✓ | ✓ |
+| `inbox` | ✓ | ✓ | ✓ |
+| `lock-pattern` | ✓ | ✓ | ✓ |
+| `magnifying-glass` | ✓ | ✓ | ✓ |
+| `memo-shield` | ✓ | ✓ | — |
+| `minus` | ✓ | ✓ | ✓ |
+| `mobile-notch-rotate` | ✓ | ✓ | ✓ |
+| `moon` | ✓ | ✓ | ✓ |
+| `ohlc` | ✓ | ✓ | ✓ |
+| `options` | ✓ | ✓ | ✓ |
+| `page-circle-arrow-right` | ✓ | ✓ | ✓ |
+| `passkey` | ✓ | ✓ | ✓ |
+| `pen-field-circle-xmark` | ✓ | ✓ | — |
+| `pen-field-lock` | ✓ | ✓ | — |
+| `pen-field-slash` | ✓ | ✓ | — |
+| `phone` | ✓ | ✓ | ✓ |
+| `playback-speed` | ✓ | ✓ | ✓ |
+| `plus` | ✓ | ✓ | ✓ |
+| `puzzles-piece-two` | ✓ | ✓ | ✓ |
+| `quill` | — | ✓ | ✓ |
+| `rectangle-history-circle-dollar` | ✓ | ✓ | — |
+| `right-from-bracket` | ✓ | ✓ | ✓ |
+| `rotate-device` | ✓ | ✓ | ✓ |
+| `rotate-right` | ✓ | ✓ | ✓ |
+| `shield-circle-check` | ✓ | ✓ | — |
+| `shield-halved-circle-minus` | ✓ | ✓ | — |
+| `shield-halved-lock` | ✓ | ✓ | — |
+| `shield-lock` | ✓ | ✓ | — |
+| `sparkles` | ✓ | ✓ | ✓ |
+| `spinner` | ✓ | ✓ | ✓ |
+| `square` | ✓ | ✓ | ✓ |
+| `square-check` | ✓ | ✓ | ✓ |
+| `square-minus` | ✓ | ✓ | ✓ |
+| `star` | ✓ | ✓ | ✓ |
+| `stop-loss` | ✓ | ✓ | ✓ |
+| `sun` | ✓ | ✓ | ✓ |
+| `table-cells-large` | ✓ | ✓ | ✓ |
+| `table-columns` | ✓ | ✓ | ✓ |
+| `take-profit` | ✓ | ✓ | ✓ |
+| `trash` | ✓ | ✓ | ✓ |
+| `trash-can` | ✓ | ✓ | ✓ |
+| `triangle-exclamation` | ✓ | ✓ | ✓ |
+| `user` | ✓ | ✓ | ✓ |
+| `user-circle-arrow-right` | ✓ | ✓ | ✓ |
+| `user-circle-arrow-up` | ✓ | ✓ | ✓ |
+| `user-circle-dollar` | ✓ | ✓ | — |
+| `user-large-circle-dollar` | ✓ | ✓ | — |
+| `user-tie-circle-dollar` | ✓ | ✓ | ✓ |
+| `users-line-circle-dollar` | ✓ | ✓ | — |
+| `users-rectangle-circle-dollar` | ✓ | ✓ | — |
+| `wallet` | ✓ | ✓ | ✓ |
+| `wallet-circle-minus` | ✓ | ✓ | ✓ |
+| `wallet-circle-plus` | ✓ | ✓ | ✓ |
+| `wallet-signal` | ✓ | ✓ | ✓ |
+| `xmark` | ✓ | ✓ | ✓ |

package/guides/design-system-guide/quill-ds-guide.md

@@ -59,7 +59,7 @@ Token rules apply ONLY to:
 ### Rule 4 — Do NOT install or import these separately
 
 ```
-❌ lucide-react — already bundled in the npm package
+❌ lucide-react or any icon library — icons come from FontAwesome Pro via the package's <Icon /> component (see icon-reference.md in this folder)
 ❌ tailwindcss — the package ships its own Tailwind v4 config
 ❌ @apply with hsl(var(--token)) — Tailwind v4 uses CSS variables directly
 ❌ tailwind.config.js — configuration is handled by the package via CSS
@@ -632,9 +632,9 @@ Landing page hero sections in multiple layout types.
 |---------|-------------|
 | Type 1 — Desktop | Two columns: tagline pill + heading + body + Get started / Learn more CTAs left; square image panel right |
 | Type 1 — Mobile | Single column stacked: text content centred above, image panel full-width below |
-| Type 2 — Desktop | Centred single-column: tagline pill + heading + body + single primary CTA with `ArrowRight` icon; no image |
+| Type 2 — Desktop | Centred single-column: tagline pill + heading + body + single primary CTA with `<Icon name="arrow-right" />`; no image |
 
-**Components used:** `Button` (default `sm`, `secondary sm`); `ArrowUpRight`, `ArrowRight` icons (lucide)
+**Components used:** `Button` (default `sm`, `secondary sm`); `<Icon name="arrow-up-right" />`, `<Icon name="arrow-right" />` (FontAwesome Pro via the `Icon` component)
 
 **Tokens used:** `bg-primary-surface`, `bg-secondary-surface`, `border-default`, `text-prominent`, `text-subtle`, `bg-success`, `rounded-xl`, `rounded-full`, `px-layout-margin-inline`, `gap-layout-gutter`, `py-24`, `text-5xl`, `font-semibold`, `font-display`, `tracking-tight`, `text-lg`, `font-body`, `text-sm`, `shadow-sm`, `max-w-2xl`
 
@@ -657,7 +657,7 @@ Landing page hero sections in multiple layout types.
 | Using standard TW sizes for headings (e.g. `text-6xl` = 60px) | Use design system values (`text-6xl` = 64px in this system) |
 | Using `rounded-[4px]` or `rounded-[2px]` | Use `rounded-xs` (4px) or `rounded-2xs` (2px) |
 | Using small radius on buttons | Buttons use `rounded-full` (pill shape, 999px) |
-| Installing `lucide-react` separately | Already bundled — import icons directly |
+| Installing or importing `lucide-react` | Use `<Icon name="..." weight="..." />` (FontAwesome Pro) — catalog in `icon-reference.md` |
 | Adding `tailwind.config.js` | Tailwind v4 uses CSS config via the package |
 | Using `bg-gray-*`, `text-zinc-*`, etc. | Use semantic tokens only |
 | Using `bg-prominent`, `bg-card`, `bg-popover`, `bg-subtle` | Use `bg-primary-surface`, `bg-primary-canvas`, `bg-secondary-surface`, `bg-secondary-canvas` |

package/guides/rules/design-system-consuming-project.mdc

@@ -109,7 +109,7 @@ Token rules apply **only** to: color (bg, text, border, ring, shadow color), bor
 ## Rule 4 — Do NOT install or configure these separately
 
 ```
-❌ Do NOT install lucide-react — it is already bundled in the package
+❌ Do NOT install or import lucide-react or any icon library — use the package's <Icon /> component (FontAwesome Pro): <Icon name="bell" weight="bold" />. Catalog + weight conventions: guides/design-system-guide/icon-reference.md
 ❌ Do NOT install tailwindcss separately — the package ships its own Tailwind v4 setup
 ❌ Do NOT add a tailwind.config.js — configuration is handled by the package
 ❌ Do NOT use @apply with hsl(var(--token)) — Tailwind v4 uses CSS variables directly
@@ -183,22 +183,36 @@ Wait for confirmation before proceeding.
 
 ---
 
-## Rule 8 — Blocks are playground-only (not package exports)
+## Rule 8 — Blocks are exported from the package
 
-**Blocks** are pre-composed UI sections (e.g. NavBar) demonstrated in the **Blocks** tab of the design system playground. They are **not** exported from `@deriv-ds/design-intelligence-layer`.
+**Blocks** are pre-composed UI sections (Hero sections, NavBar patterns) exported directly from `@deriv-ds/design-intelligence-layer`. Import them by name — do not re-implement them.
 
+### Available blocks
+
+| Block name | Export(s) | Description |
+|---|---|---|
+| Hero mobile home | `HeroMobileHomeTitle`, `HeroMobileHomeTotalAssets`, `HeroMobileHomeTitleSkeleton`, `HeroMobileHomeTotalAssetsSkeleton` | Mobile hero with onboarding stepper or total assets |
+| Hero desktop home | `HeroDesktopHomeOnboarding`, `HeroDesktopHomeWithBalance`, `HeroDesktopHomeOnboardingSkeleton`, `HeroDesktopHomeWithBalanceSkeleton` | Desktop hero with onboarding or balance state |
+| Hero mobile main | `HeroMobileMain`, `HeroMobileMainSkeleton` | Mobile hero with account tabs + action buttons |
+| Hero desktop main | `HeroDesktopMain`, `HeroDesktopMainSkeleton` | Desktop hero with account tabs + action buttons |
+| Hero mobile secondary | `HeroMobileSecondary`, `HeroMobileSecondarySkeleton` | Mobile single-account hero (light surface) |
+| Hero desktop secondary | `HeroDesktopSecondary`, `HeroDesktopSecondarySkeleton` | Desktop single-account hero (light surface) |
+| Hero mobile transaction | `HeroMobileTransaction` | Transaction details card (deposit/withdraw/transfer/convert) |
+| Navbar | `Navbar` | Responsive nav — renders sidebar on desktop (≥768px), bottom bar on mobile (<768px). Props: `activeId`, `badges`, `onNavChange` |
+| NavMobileBottomBar | `NavMobileBottomBar` | Mobile bottom tab bar with optional badges (use `Navbar` unless you need explicit control) |
+| NavDesktopSidebar | `NavDesktopSidebar` | Desktop sidebar with nav items, Ask Amy pill, QR banner (use `Navbar` unless you need explicit control) |
+
+### Correct import pattern
+
+```tsx
+import { Navbar, HeroMobileMain } from "@deriv-ds/design-intelligence-layer"
 ```
-❌ Do NOT import blocks from the package — they don't exist there
-❌ Do NOT treat block names (e.g. "NavBar") as component names from Rule 1
-✅ To build a block pattern in your project: compose it manually using package components + tokens
-✅ Reference guides/design-system-guide/trading-game-ds-guide.md Section 8.5 for block structure
-```
 
-| Block | Playground tab | Importable? |
-|-------|---------------|-------------|
-| NavBar | Blocks → NavBar | No — build with `Button` + tokens |
-| Hero (Type 1) | Blocks → Hero | No — build with `Button` + tokens; two-column layout with image panel |
-| Hero (Type 2) | Blocks → Hero | No — build with `Button` + `ArrowRight` icon + tokens; centred single-column, no image |
+### Shared action button (used by hero main/secondary blocks)
+
+```tsx
+import { HeroActionButton } from "@deriv-ds/design-intelligence-layer"
+```
 
 ---
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@deriv-ds/design-intelligence-layer",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Deriv Design System — shadcn/ui components with Tailwind CSS v4",
+  "license": "UNLICENSED",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -23,11 +24,10 @@
     "**/*.css"
   ],
   "scripts": {
-    "dev": "npm run generate:blocks && next dev -H 127.0.0.1 -p 3000",
+    "dev": "next dev -H 127.0.0.1 -p 3000",
     "generate:registry": "node scripts/generate-component-registry.mjs",
-    "generate:blocks": "node scripts/generate-block-sources.mjs",
+    "generate:icon-reference": "node scripts/generate-icon-reference.mjs",
     "build": "tsup",
-    "prebuild:next": "npm run generate:blocks",
     "build:next": "next build",
     "start": "next start",
     "lint": "eslint",
@@ -40,16 +40,20 @@
     "AGENTS.md",
     "README.md"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
     "tailwindcss": ">=4"
   },
   "dependencies": {
+    "@awesome.me/kit-394c25e5aa": "^1.0.61",
+    "@awesome.me/kit-a9f9eb613f": "^1.0.278",
     "@base-ui/react": "^1.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/pro-light-svg-icons": "^6.7.2",
+    "@fortawesome/pro-regular-svg-icons": "^6.7.2",
+    "@fortawesome/pro-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^3.3.1",
     "@hookform/resolvers": "^5.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -57,7 +61,7 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.577.0",
+    "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react-day-picker": "^9.14.0",
     "react-hook-form": "^7.71.2",
@@ -77,7 +81,6 @@
     "eslint": "^9",
     "eslint-config-next": "16.2.6",
     "next": "16.2.6",
-    "next-themes": "^0.4.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "shadcn": "^3.8.5",
@@ -90,6 +93,7 @@
     "lodash": "^4.18.0",
     "postcss": "^8.5.10",
     "qs": "^6.15.2",
-    "hono": "^4.12.21"
+    "hono": "^4.12.21",
+    "esbuild": "^0.28.1"
   }
 }

package/src/styles.css

@@ -12,6 +12,16 @@
 /* Fonts — Inter (all) */
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
 
+/* FontAwesome Pro — inside @layer base so Tailwind utilities (size-*, hidden) win */
+@layer base {
+  .svg-inline--fa {
+    height: auto;
+    width: auto;
+    display: inline-block;
+    vertical-align: -0.125em;
+  }
+}
+
 
 /* ── Tailwind theme bridge — maps CSS vars to utility classes ── */
 @theme inline {