@nextlyhq/ui 0.0.2-alpha.6 → 0.0.2-alpha.62

package/dist/theme.css

@@ -0,0 +1,1249 @@
+/**
+ * Nextly design-system theme.
+ *
+ * Single source of truth for tokens, the Tailwind `@theme inline` mappings, the
+ * dark variant, and the animation keyframes. It does NOT include a base reset —
+ * that lives in `index.css` and ships in the pre-compiled `styles.css` bundle.
+ * Consumed two ways:
+ *   - Source: `@import "@nextlyhq/ui/theme.css"` after `@import "tailwindcss"`
+ *     to compile against the token contract (admin, power-user plugins).
+ *   - Pre-compiled: `@nextlyhq/ui/styles.css` bundles this behind a Tailwind
+ *     build so plugins get styled components with zero setup.
+ *
+ * Selectors are unscoped (`:root` / `.dark`); a consumer that embeds the UI in a
+ * host page scopes them at build time (admin rewrites to `.nextly-admin`).
+ */
+
+/**
+ * Activate `dark:` utilities from the `.dark` class rather than the OS
+ * `prefers-color-scheme`, so an explicit light choice wins over system dark.
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  /* ============================================
+   * ANIMATIONS (Tailwind v4.1)
+   * ============================================ */
+  --animate-accordion-down: accordion-down 0.3s cubic-bezier(0.87, 0, 0.13, 1);
+  --animate-accordion-up: accordion-up 0.3s cubic-bezier(0.87, 0, 0.13, 1);
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-fade-out: fade-out 0.2s ease-in;
+  --animate-zoom-in-95: zoom-in-95 0.1s ease-out;
+  --animate-zoom-out-95: zoom-out-95 0.1s ease-in;
+  --animate-slide-in-from-top-2: slide-in-from-top-2 0.2s ease-out;
+  --animate-slide-in-from-bottom-2: slide-in-from-bottom-2 0.2s ease-out;
+  --animate-slide-in-from-left-2: slide-in-from-left-2 0.2s ease-out;
+  --animate-slide-in-from-right-2: slide-in-from-right-2 0.2s ease-out;
+  --animate-brand-orbit: brand-orbit 2.4s linear infinite;
+  --animate-brand-pulse: brand-pulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
+
+  /* ============================================
+   * COLOR PALETTE (Tailwind v4.1)
+   * Monochrome design system, WCAG 2.2 AA compliant.
+   *
+   * Color Format Strategy:
+   * - Reference scales (blue/slate/etc.): HEX, kept for utility classes.
+   * - Semantic tokens: OKLCH full-color values defined in `:root` / `.dark`,
+   *   mapped here via `@theme inline` with bare `var()` so scoped/dark
+   *   overrides resolve at the consuming element.
+   * ============================================ */
+
+  /* Blue Scale - Primary Brand Color */
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+
+  /* Cyan Scale - Accent Color */
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+  --color-cyan-950: #083344;
+
+  /* Green Scale - Success Color */
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+
+  /* Amber Scale - Warning Color */
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+
+  /* Red Scale - Error/Destructive Color */
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+
+  /* Slate Scale - Neutral Colors */
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+
+  /* ============================================
+   * SEMANTIC COLOR TOKENS (Tailwind v4.1)
+   * Reference color scales defined above
+   * ============================================ */
+
+  /* shadcn/ui semantic colors - reference CSS variables defined below */
+  --color-overlay: var(--nx-overlay);
+  --color-overlay-soft: var(--nx-overlay-soft);
+  --color-overlay-strong: var(--nx-overlay-strong);
+  --color-border: var(--nx-border);
+  --color-border-subtle: var(--nx-border-subtle);
+  --color-border-strong: var(--nx-border-strong);
+  --color-input: var(--nx-input);
+  --color-control-border: var(--nx-control-border);
+  --color-ring: var(--nx-ring);
+  --color-background: var(--nx-background);
+  --color-foreground: var(--nx-foreground);
+
+  --color-primary: var(--nx-primary);
+  --color-primary-50: color-mix(in srgb, var(--nx-primary), white 95%);
+  --color-primary-100: color-mix(in srgb, var(--nx-primary), white 90%);
+  --color-primary-200: color-mix(in srgb, var(--nx-primary), white 70%);
+  --color-primary-300: color-mix(in srgb, var(--nx-primary), white 50%);
+  --color-primary-400: color-mix(in srgb, var(--nx-primary), white 30%);
+  --color-primary-500: var(--nx-primary);
+  --color-primary-600: color-mix(in srgb, var(--nx-primary), black 10%);
+  --color-primary-700: color-mix(in srgb, var(--nx-primary), black 30%);
+  --color-primary-800: color-mix(in srgb, var(--nx-primary), black 50%);
+  --color-primary-900: color-mix(in srgb, var(--nx-primary), black 70%);
+  --color-primary-950: color-mix(in srgb, var(--nx-primary), black 85%);
+  --color-primary-foreground: var(--nx-primary-foreground);
+
+  --color-secondary: var(--nx-secondary);
+  --color-secondary-foreground: var(--nx-secondary-foreground);
+
+  /* Status scales, derived the same way as the primary scale above.
+   *
+   * A status role is one token; the scale is mixed from it, so retheming
+   * `--nx-success` moves every shade with it and they cannot drift apart. The
+   * shades exist because a status needs more than its solid colour: a tinted
+   * surface, a border on that surface, and text dark enough to read on it.
+   * Mixing toward white and black keeps 50 pale and 900 deep in both modes,
+   * which is what a `dark:` pair at the call site already assumes. */
+  --color-destructive: var(--nx-destructive);
+  --color-destructive-50: color-mix(in srgb, var(--nx-destructive), white 95%);
+  --color-destructive-100: color-mix(in srgb, var(--nx-destructive), white 90%);
+  --color-destructive-200: color-mix(in srgb, var(--nx-destructive), white 70%);
+  --color-destructive-300: color-mix(in srgb, var(--nx-destructive), white 50%);
+  --color-destructive-400: color-mix(in srgb, var(--nx-destructive), white 30%);
+  --color-destructive-500: var(--nx-destructive);
+  --color-destructive-600: color-mix(in srgb, var(--nx-destructive), black 10%);
+  --color-destructive-700: color-mix(in srgb, var(--nx-destructive), black 30%);
+  --color-destructive-800: color-mix(in srgb, var(--nx-destructive), black 50%);
+  --color-destructive-900: color-mix(in srgb, var(--nx-destructive), black 70%);
+  --color-destructive-950: color-mix(in srgb, var(--nx-destructive), black 85%);
+  /* Saturated fill for solid buttons, kept separate from the text-tuned base
+   * so each can be solved for its own job. The ink that lands on it is
+   * `-foreground`, which is white in light mode and black in dark. */
+  --color-destructive-solid: var(--nx-destructive-solid);
+  --color-destructive-foreground: var(--nx-destructive-foreground);
+
+  --color-success: var(--nx-success);
+  --color-success-50: color-mix(in srgb, var(--nx-success), white 95%);
+  --color-success-100: color-mix(in srgb, var(--nx-success), white 90%);
+  --color-success-200: color-mix(in srgb, var(--nx-success), white 70%);
+  --color-success-300: color-mix(in srgb, var(--nx-success), white 50%);
+  --color-success-400: color-mix(in srgb, var(--nx-success), white 30%);
+  --color-success-500: var(--nx-success);
+  --color-success-600: color-mix(in srgb, var(--nx-success), black 10%);
+  --color-success-700: color-mix(in srgb, var(--nx-success), black 30%);
+  --color-success-800: color-mix(in srgb, var(--nx-success), black 50%);
+  --color-success-900: color-mix(in srgb, var(--nx-success), black 70%);
+  --color-success-950: color-mix(in srgb, var(--nx-success), black 85%);
+  /* Saturated fill for solid usage; distinct from the text-tuned base. */
+  --color-success-solid: var(--nx-success-solid);
+  --color-success-foreground: var(--nx-success-foreground);
+
+  --color-warning: var(--nx-warning);
+  --color-warning-50: color-mix(in srgb, var(--nx-warning), white 95%);
+  --color-warning-100: color-mix(in srgb, var(--nx-warning), white 90%);
+  --color-warning-200: color-mix(in srgb, var(--nx-warning), white 70%);
+  --color-warning-300: color-mix(in srgb, var(--nx-warning), white 50%);
+  --color-warning-400: color-mix(in srgb, var(--nx-warning), white 30%);
+  --color-warning-500: var(--nx-warning);
+  --color-warning-600: color-mix(in srgb, var(--nx-warning), black 10%);
+  --color-warning-700: color-mix(in srgb, var(--nx-warning), black 30%);
+  --color-warning-800: color-mix(in srgb, var(--nx-warning), black 50%);
+  --color-warning-900: color-mix(in srgb, var(--nx-warning), black 70%);
+  --color-warning-950: color-mix(in srgb, var(--nx-warning), black 85%);
+  --color-warning-foreground: var(--nx-warning-foreground);
+
+  /* The editor's highlight mark. A token rather than a literal because it
+   * styles authored content, which an integrator restyles to their own site
+   * and which has to stay readable on a dark page. */
+  --color-highlight: var(--nx-highlight);
+  --color-highlight-foreground: var(--nx-highlight-foreground);
+
+  /* Syntax colors, so code tokens are styled the same way as everything else
+   * (text-code-keyword, bg-code-bg) instead of through bespoke CSS. */
+  --color-code-bg: var(--nx-code-bg);
+  --color-code-fg: var(--nx-code-fg);
+  --color-code-comment: var(--nx-code-comment);
+  --color-code-keyword: var(--nx-code-keyword);
+  --color-code-string: var(--nx-code-string);
+  --color-code-number: var(--nx-code-number);
+  --color-code-function: var(--nx-code-function);
+  --color-code-operator: var(--nx-code-operator);
+  --color-code-punctuation: var(--nx-code-punctuation);
+  --color-code-variable: var(--nx-code-variable);
+  --color-code-tag: var(--nx-code-tag);
+  --color-code-deleted: var(--nx-code-deleted);
+  --color-code-inserted: var(--nx-code-inserted);
+
+  --color-muted: var(--nx-muted);
+  --color-muted-foreground: var(--nx-muted-foreground);
+
+  --color-accent: var(--nx-accent);
+  --color-accent-50: color-mix(in srgb, var(--nx-accent), white 95%);
+  --color-accent-100: color-mix(in srgb, var(--nx-accent), white 90%);
+  --color-accent-200: color-mix(in srgb, var(--nx-accent), white 70%);
+  --color-accent-300: color-mix(in srgb, var(--nx-accent), white 50%);
+  --color-accent-400: color-mix(in srgb, var(--nx-accent), white 30%);
+  --color-accent-500: var(--nx-accent);
+  --color-accent-600: color-mix(in srgb, var(--nx-accent), black 10%);
+  --color-accent-700: color-mix(in srgb, var(--nx-accent), black 30%);
+  --color-accent-800: color-mix(in srgb, var(--nx-accent), black 50%);
+  --color-accent-900: color-mix(in srgb, var(--nx-accent), black 70%);
+  --color-accent-950: color-mix(in srgb, var(--nx-accent), black 85%);
+  --color-accent-foreground: var(--nx-accent-foreground);
+
+  --color-card: var(--nx-card);
+  --color-card-foreground: var(--nx-card-foreground);
+
+  --color-popover: var(--nx-popover);
+  --color-popover-foreground: var(--nx-popover-foreground);
+
+  /* Sidebar semantic tokens */
+  --color-sidebar: var(--nx-sidebar-background);
+  --color-sidebar-background: var(--nx-sidebar-background);
+  --color-sidebar-foreground: var(--nx-sidebar-foreground);
+  --color-sidebar-primary: var(--nx-sidebar-primary);
+  --color-sidebar-primary-foreground: var(--nx-sidebar-primary-foreground);
+  --color-sidebar-accent: var(--nx-sidebar-accent);
+  --color-sidebar-accent-background: var(--nx-sidebar-accent);
+  --color-sidebar-accent-foreground: var(--nx-sidebar-accent-foreground);
+  --color-sidebar-border: var(--nx-sidebar-border);
+  --color-sidebar-ring: var(--nx-sidebar-ring);
+
+  /* ============================================
+   * TYPOGRAPHY (Tailwind v4.1)
+   * Perfect Fourth Scale (1.333 ratio) - WCAG 2.2 AA Compliant
+   * ============================================ */
+
+  /* Font Families live in the non-inline @theme block below. */
+
+  /* Type Scale - Base Size: 16px (1rem) */
+  --text-xs: 0.75rem;
+  /* 12px */
+  --text-sm: 0.875rem;
+  /* 14px */
+  --text-base: 1rem;
+  /* 16px - body text (WCAG minimum) */
+  --text-lg: 1.125rem;
+  /* 18px */
+  --text-xl: 1.25rem;
+  /* 20px */
+  --text-2xl: 1.5rem;
+  /* 24px */
+  --text-3xl: 1.875rem;
+  /* 30px */
+  --text-4xl: 2.25rem;
+  /* 36px */
+  --text-5xl: 3rem;
+  /* 48px */
+  --text-6xl: 3.75rem;
+  /* 60px */
+
+  /* Line Heights (Leading) */
+  --leading-none: 1;
+  /* Large display text */
+  --leading-tight: 1.25;
+  /* Headings */
+  --leading-snug: 1.375;
+  /* Tight UI elements */
+  --leading-normal: 1.5;
+  /* Default for UI text */
+  --leading-relaxed: 1.625;
+  /* Long-form content */
+  --leading-loose: 2;
+  /* Very spacious text */
+
+  /* Letter Spacing (Tracking) */
+  --tracking-tighter: -0.05em;
+  /* -0.8px at 16px */
+  --tracking-tight: -0.025em;
+  /* -0.4px at 16px - for large headings */
+  --tracking-normal: 0em;
+  /* Default */
+  --tracking-wide: 0.025em;
+  /* +0.4px at 16px - for small text */
+  --tracking-wider: 0.05em;
+  /* +0.8px at 16px - for uppercase */
+  --tracking-widest: 0.1em;
+  /* +1.6px at 16px */
+
+  /* ============================================
+   * SPACING & LAYOUT (Tailwind v4.1)
+   * 8px Grid System - Industry Standard
+   * ============================================ */
+
+  /* Spacing Scale (8px base unit) */
+  --space-0: 0rem;
+  /* 0px */
+  --space-px: 0.0625rem;
+  /* 1px - for fine borders */
+  --space-0-5: 0.125rem;
+  /* 2px */
+  --space-1: 0.25rem;
+  /* 4px - icon padding, tiny gaps */
+  --space-1-5: 0.375rem;
+  /* 6px */
+  --space-2: 0.5rem;
+  /* 8px - tight spacing, inline elements */
+  --space-2-5: 0.625rem;
+  /* 10px */
+  --space-3: 0.75rem;
+  /* 12px - between related elements */
+  --space-3-5: 0.875rem;
+  /* 14px */
+  --space-4: 1rem;
+  /* 16px - standard element spacing */
+  --space-5: 1.25rem;
+  /* 20px */
+  --space-6: 1.5rem;
+  /* 24px - between form fields */
+  --space-7: 1.75rem;
+  /* 28px */
+  --space-8: 2rem;
+  /* 32px - between sections */
+  --space-9: 2.25rem;
+  /* 36px */
+  --space-10: 2.5rem;
+  /* 40px */
+  --space-11: 2.75rem;
+  /* 44px - minimum touch target */
+  --space-12: 3rem;
+  /* 48px - between major sections */
+  --space-14: 3.5rem;
+  /* 56px */
+  --space-16: 4rem;
+  /* 64px - page margins */
+  --space-20: 5rem;
+  /* 80px */
+  --space-24: 6rem;
+  /* 96px - large section breaks */
+
+  /* ============================================
+   * BORDER RADIUS (Tailwind v4.1)
+   *
+   * The contract is three steps — sm, md, lg — all derived from the single
+   * --radius knob (shadcn pattern), so the whole admin re-rounds from one
+   * declaration. Those three are also exactly what `tailwind-preset.ts` exports,
+   * so a plugin built against the published preset gets the same scale.
+   *
+   * That only holds if components pick a TIER BY ELEMENT CATEGORY instead of
+   * naming a length. A component that hardcodes a corner value — `rounded-none`
+   * as much as `rounded-[6px]` — pins itself at that value and silently opts
+   * out of the knob. The tiers, and what the shipped components put in each:
+   *
+   *   rounded-lg (--radius-lg, the knob itself)
+   *     Floating and grouping containers: cards, dialogs, alert dialogs,
+   *     popovers, tooltips, dropdown / select / command panels, empty-state
+   *     panels.
+   *
+   *   rounded-md (--radius-md, one step tighter)
+   *     Controls and the inline surfaces that sit among them: buttons, inputs,
+   *     textareas, select triggers, icon buttons, alerts, table wrappers and
+   *     image frames. A control nested in a container reads as inset when its
+   *     corner is tighter than the surface holding it.
+   *
+   *   rounded-sm (--radius-sm, tighter again)
+   *     Small controls and adornments: menu and list items, badges, chips,
+   *     tags, checkboxes, toolbar affordances — anything already inside a
+   *     control or a dense row.
+   *
+   * Circles sit deliberately outside the scale: avatars, status dots, spinners,
+   * progress tracks and switch tracks and thumbs use `rounded-full`, which is
+   * 9999px and not a --radius step. They are round because of their shape, not
+   * because of the theme, so a retheme must not flatten them.
+   *
+   * rounded-xl / rounded-2xl are NOT tiers of this knob. `tailwind-preset.ts`
+   * exports only lg/md/sm, so a plugin using the preset gets Tailwind's fixed
+   * 0.75rem / 1rem for them, detached from --radius; and the definitions below
+   * ADD to the knob rather than subtracting, so they always sit rounder than
+   * the container tier and drift further as the knob grows. Nothing in the repo
+   * uses them. Treat them as off-contract and pick from sm/md/lg.
+   *
+   * At the shipped 0.5rem the three tiers are 4px, 6px and 8px. All positive,
+   * which matters: `sm` and `md` SUBTRACT from the knob, so a knob under 4px
+   * makes them negative. They still render square, because border-radius clamps
+   * a negative length to 0 at used-value time — but the token keeps its
+   * negative value, so reading `--radius-sm` for a padding, an inset, or
+   * through getComputedStyle yields -4px rather than 0. Anything consuming a
+   * step as a LENGTH rather than as a corner must clamp it itself, and that
+   * obligation returns the moment someone dials the knob back down.
+   *
+   * A site that genuinely must stay square keeps `rounded-none` WITH an inline
+   * comment saying why — overlapped-border strips, full-bleed fills inside an
+   * already-rounded parent, underline tabs (which is why Tabs is square, not a
+   * `rounded-sm` adornment). Square with a stated reason is a decision; square
+   * without one is an element that was never wired to the knob. Sheet is the
+   * standing example of the latter: it is anchored to the viewport edge and
+   * carries no radius class at all.
+   *
+   * Corollary for containers: a rounded box whose child paints a background to
+   * its edge must either clip that child (`overflow-hidden`) or give the child
+   * a matching corner (`rounded-b-[inherit]` and friends). Otherwise the child's
+   * fill paints square across the parent's curve at any nonzero --radius.
+   * ============================================ */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+
+  /* ============================================
+   * BOX SHADOWS (Tailwind v4.1)
+   * The ramp's colour comes from --nx-shadow-color, mixed down to each step's
+   * alpha. `@theme inline` copies a declaration's value into the generated
+   * utility, so a literal rgba() would be frozen at build time while this
+   * var() stays live and re-resolves per mode / per scope at the element.
+   * ============================================ */
+  --shadow-sm: 0 1px 2px 0
+    color-mix(in srgb, var(--nx-shadow-color) 5%, transparent);
+  --shadow-md:
+    0 4px 6px -1px color-mix(in srgb, var(--nx-shadow-color) 10%, transparent),
+    0 2px 4px -1px color-mix(in srgb, var(--nx-shadow-color) 6%, transparent);
+  --shadow-lg:
+    0 10px 15px -3px color-mix(in srgb, var(--nx-shadow-color) 10%, transparent),
+    0 4px 6px -2px color-mix(in srgb, var(--nx-shadow-color) 5%, transparent);
+  --shadow-xl:
+    0 20px 25px -5px color-mix(in srgb, var(--nx-shadow-color) 10%, transparent),
+    0 10px 10px -5px color-mix(in srgb, var(--nx-shadow-color) 4%, transparent);
+
+  /* Custom Functional Shadows (Fixes build warnings from arbitrary values) */
+  --shadow-inner-subtle: 0 -4px 6px -1px
+    color-mix(in srgb, var(--nx-shadow-color) 5%, transparent);
+  --shadow-glow-success: 0 0 10px
+    color-mix(in srgb, var(--nx-success) 10%, transparent);
+  --shadow-glow-primary: 0 0 15px
+    color-mix(in srgb, var(--nx-primary) 50%, transparent);
+  --shadow-elevation-primary: 0 8px 20px -8px
+    color-mix(in srgb, var(--nx-primary) 40%, transparent);
+  --shadow-soft-primary: 0 8px 30px
+    color-mix(in srgb, var(--nx-primary) 6%, transparent);
+  --shadow-neo: 4px 4px 0px 0px
+    color-mix(in srgb, var(--nx-shadow-color) 10%, transparent);
+
+  /* ============================================
+   * FLUID TYPOGRAPHY (Tailwind v4.1)
+   * Fixes build warnings from arbitrary values
+   * ============================================ */
+  --text-fluid-2xs: clamp(0.6rem, 0.55rem + 0.1vw, 0.65rem);
+  --text-fluid-xs: clamp(0.65rem, 0.6rem + 0.1vw, 0.7rem);
+  --text-fluid-sm: clamp(0.7rem, 0.65rem + 0.1vw, 0.75rem);
+  --text-fluid-base: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
+  --text-fluid-lg: clamp(1rem, 2vw, 1.125rem);
+  --text-fluid-xl: clamp(1.25rem, 3vw, 1.5rem);
+  --text-fluid-2xl: clamp(1.5rem, 5vw, 2.25rem);
+  --text-fluid-3xl: clamp(1.5rem, 5vw, 2.5rem);
+  --text-fluid-4xl: clamp(1.75rem, 5vw, 2.5rem);
+
+  /* Custom Transitions */
+  --ease-premium: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* ============================================
+ * FONT FAMILIES & WEIGHTS (Tailwind v4.1)
+ *
+ * Deliberately a non-inline `@theme`. `@theme inline` copies a declaration's
+ * value into whatever consumes it, which froze these stacks into
+ * `--default-font-family` / `--default-mono-font-family` and into the
+ * `font-mono` utility at build time, so the variables existed but nothing read
+ * them and re-declaring one on a scope changed nothing. A plain `@theme`
+ * emits each token as a real custom property and makes its consumers
+ * reference it with `var()`, so the base rule and the `font-*` utilities
+ * re-resolve wherever the token is redeclared. The weights sit here for the
+ * same reason, and to match the weights Tailwind ships (`--font-weight-black`
+ * and friends), which the `font-*` utilities also reach through `var()`.
+ *
+ * `--font-*` is the font-FAMILY namespace and `--font-weight-*` is the weight
+ * one, so a weight declared as `--font-bold` registers a family literally named
+ * "bold": `font-bold` then compiles to `font-family: 700`, which browsers drop,
+ * and it shadows the real weight utility rather than adding to it.
+ * ============================================ */
+@theme {
+  /* The host app supplies the face through the variable; the family name is the
+   * var()'s own FALLBACK ARGUMENT, covering a host that installed the font
+   * without `next/font`, and the generic stack after it covers a host that did
+   * neither. Naming only the family would resolve to nothing under `next/font`,
+   * which self-hosts the face and exposes it ONLY as a variable -- a bare
+   * "Geist" there silently falls through to the system sans.
+   *
+   * The fallback has to sit INSIDE the parentheses. A family listed after the
+   * closing `)` is not reached when the variable is undefined: an unresolved
+   * `var()` with no fallback makes the whole declaration invalid at
+   * computed-value time, which for an inherited property like font-family means
+   * the element inherits its parent's face and the entire stack is discarded.
+   * The comma list looks like a fallback chain and is not one, so a host that
+   * skipped the variable rendered in whatever the page already used rather than
+   * in the generic sans this stack names.
+   *
+   * These are declared in a non-inline `@theme`, so they are emitted into
+   * `:root` and substitution happens THERE, not on the consuming element. A
+   * host must expose the variable at or above that scope -- `next/font`'s
+   * generated class belongs on `<html>`. On `<body>` the variable is invisible
+   * to this declaration no matter how it is spelled. */
+  --font-sans:
+    var(--font-geist, Geist), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Body text, captions */
+  --font-weight-normal: 400;
+  /* Subheadings, emphasis */
+  --font-weight-medium: 500;
+  /* Headings, buttons */
+  --font-weight-semibold: 600;
+  /* Strong emphasis (rarely used) */
+  --font-weight-bold: 700;
+}
+
+/* ============================================
+ * RESPONSIVE TYPOGRAPHY (Desktop)
+ * Scale up larger text sizes on desktop screens
+ * Must be outside @theme block due to Tailwind v4.1 restrictions
+ * ============================================ */
+@media (min-width: 768px) {
+  @theme {
+    --text-2xl: 1.75rem;
+    /* 28px on desktop (from 24px) */
+    --text-3xl: 2.25rem;
+    /* 36px on desktop (from 30px) */
+    --text-4xl: 3rem;
+    /* 48px on desktop (from 36px) */
+    --text-5xl: 4rem;
+    /* 64px on desktop (from 48px) */
+  }
+}
+
+/* Animation keyframes referenced by the --animate-* tokens above. */
+/* Keyframes for custom animations */
+@keyframes brand-orbit {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes brand-pulse {
+  0%,
+  100% {
+    transform: scale(0.97);
+    filter: drop-shadow(
+      0 0 10px color-mix(in srgb, var(--nx-primary) 8%, transparent)
+    );
+  }
+  50% {
+    transform: scale(1.03);
+    filter: drop-shadow(
+      0 0 20px color-mix(in srgb, var(--nx-primary) 22%, transparent)
+    );
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoom-in-95 {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out-95 {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes slide-in-from-top-2 {
+  from {
+    transform: translateY(-0.5rem);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom-2 {
+  from {
+    transform: translateY(0.5rem);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-left-2 {
+  from {
+    transform: translateX(-0.5rem);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-right-2 {
+  from {
+    transform: translateX(0.5rem);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+:root {
+  /* Base colors - using Slate neutral scale */
+  --nx-background: oklch(0.99 0 0);
+  /* Pure white for weightless aesthetic */
+  --nx-page-background: oklch(0.97 0 0);
+  /* #f9f9f9 for page content area */
+  --nx-foreground: oklch(0 0 0);
+
+  /* Component colors */
+  --nx-card: oklch(1 0 0);
+  /* pure white for cards to pop on off-white bg */
+  --nx-card-foreground: oklch(0 0 0);
+  --nx-popover: oklch(0.99 0 0);
+  /* white */
+  --nx-popover-foreground: oklch(0 0 0);
+  /* Table headers, table footers and the pagination bar. A surface, so it lives
+     with the other surfaces: declared next to the component that paints it, a
+     palette change would move everything around it and leave it behind. */
+  --nx-table-header-bg: oklch(1 0 0);
+
+  /* Brand colors - Blue-Cyan Professional Palette */
+  --nx-primary: oklch(0 0 0);
+  /* Black for premium minimalist aesthetic */
+  --nx-primary-foreground: oklch(1 0 0);
+  /* white */
+
+  /* Secondary colors - using slate-100 for subtle backgrounds */
+  --nx-secondary: oklch(0.94 0 0);
+  /* slate-100 */
+  --nx-secondary-foreground: oklch(0 0 0);
+
+  /* Utility colors */
+  --nx-muted: oklch(0.97 0 0);
+  /* Darkened so muted text clears WCAG 4.5:1 on the muted surface (was 4.35:1). */
+  --nx-muted-foreground: oklch(0.44 0 0);
+  /* A hover and selection SURFACE, not ink: one step off the page, with
+     `--nx-accent-foreground` as the only thing meant to be read on it. */
+  --nx-accent: oklch(0.94 0 0);
+  --nx-accent-foreground: oklch(0 0 0);
+
+  /* State colors - WCAG 2.2 AA Compliant.
+   * Each status has two roles kept as separate tokens, the industry-standard
+   * split (Radix/Primer): the base token is the readable TEXT color used by
+   * `text-destructive` and derived shades, and `-solid` is the saturated FILL
+   * used by buttons under the on-color ink. In light mode both roles can be
+   * the same value and the ink is white. In dark mode they cannot: a fill
+   * light enough to read as text on the page is too light for white text, so
+   * success splits the fill and destructive flips its ink to black instead.
+   * The on-color token is what varies, not just the fill. */
+  /* red-500 itself, the reference palette's red. It is lighter than the 4.5:1
+   * text minimum allows; darkening it to pass reads as a different colour, and
+   * the palette is built around this one. `contrast/accepted.ts` records the
+   * affected pairings with their measured ratios. */
+  --nx-destructive: oklch(0.63 0.19 23.03);
+  --nx-destructive-solid: oklch(0.63 0.19 23.03);
+  --nx-destructive-foreground: oklch(1 0 0);
+  /* white */
+  /* Darkened from green-600; renders as #00852c, ~4.8:1 as text on white. */
+  --nx-success: oklch(0.4981 0.17 149.2);
+  --nx-success-solid: oklch(0.53 0.17 149.2);
+  --nx-success-foreground: oklch(1 0 0);
+  /* white */
+  /* Darkened from amber-500 so it reads as text on white at WCAG 4.5:1 (was
+   * 2.15:1); its light shades still tint badge/alert surfaces. */
+  --nx-warning: oklch(0.529 0.1646 70.11);
+  --nx-warning-foreground: oklch(0.2079 0.0399 265.73);
+  /* slate-900 - REQUIRED for AA contrast (warning-500 on white = 3.4:1, fails AA) */
+
+  /* The highlighter mark in authored content. Kept a light yellow in both
+   * modes on purpose: it stands for a marker pen drawn over the text, and the
+   * pairing below is what keeps that readable rather than the page's own
+   * foreground, which would be white-on-yellow in dark mode. */
+  --nx-highlight: oklch(0.9297 0.1638 101.06);
+  /* yellow-200 */
+  --nx-highlight-foreground: oklch(0.2079 0.0399 265.73);
+  /* slate-900 — the mark keeps its own dark text, whatever the page does */
+
+  /* Syntax colors. The tokenizer reports what a token *is*; these decide how
+   * it looks, so a code block carries no colour of its own and renders from
+   * whichever mode is active. Kept muted against the monochrome chrome, and
+   * held above 4.5:1 on --nx-code-bg since code is small text. */
+  --nx-code-bg: oklch(0.9761 0.0035 247.86);
+  --nx-code-fg: oklch(0.2079 0.0399 265.73);
+  /* Darkened slightly to clear WCAG 4.5:1 on the code surface (was 4.44:1). */
+  --nx-code-comment: oklch(0.5264 0.0407 257.44);
+  --nx-code-keyword: oklch(0.4882 0.2172 303.9);
+  --nx-code-string: oklch(0.4478 0.1189 152.1);
+  --nx-code-number: oklch(0.5106 0.1518 44.2);
+  --nx-code-function: oklch(0.4757 0.1444 254.6);
+  --nx-code-operator: oklch(0.4936 0.1418 8.4);
+  /* Darkened slightly to clear WCAG 4.5:1 on the code surface (was 4.44:1). */
+  --nx-code-punctuation: oklch(0.5264 0.0407 257.44);
+  --nx-code-variable: oklch(0.4694 0.1173 62.3);
+  --nx-code-tag: oklch(0.5054 0.1905 27.5);
+  --nx-code-deleted: oklch(0.5054 0.1905 27.5);
+  --nx-code-inserted: oklch(0.4478 0.1189 152.1);
+
+  /* Element colors — 3-tier translucent border scale (monochrome).
+   * The first two tiers are decorative and are tuned by eye: subtle = faint
+   * dividers, default = the container edge on cards, groups, and tables
+   * (composites to a light grey on white, a hairline rather than a rule). The third
+   * is not decorative — strong marks the edge of a control that has no other
+   * boundary, so it is held to a contrast minimum instead. */
+  /* The scrim behind a modal. A token rather than a literal because it is the
+   * one surface colour that must differ between the two modes for the same
+   * reason a border does: it composites over what is beneath it, and what is
+   * beneath it is white here and near-black in dark. It was written inline as
+   * `bg-black/80`, identical in both modes, at four different strengths across
+   * six components — drift rather than intent. */
+  --nx-overlay: oklch(0 0 0 / 0.55);
+  /* A scrim you READ ON rather than look through. `--nx-overlay` sits under a
+   * modal, which supplies its own surface for text; a full-screen state screen
+   * puts its message straight onto the scrim, where the MUTED line decides the
+   * strength, not the heading: `text-white/60` over 55% on a white page is
+   * 2.81:1, and over 80% it is 5.66:1. Pure white clears AA on either (4.76:1
+   * and 12.63:1), so the heading alone would not have justified this token. */
+  --nx-overlay-strong: oklch(0 0 0 / 0.8);
+  /* For a scrim over CONTENT rather than the page: an image's hover actions,
+   * where the content beneath still has to read through. */
+  --nx-overlay-soft: oklch(0 0 0 / 0.4);
+  --nx-border-subtle: color-mix(in srgb, oklch(0.92 0 0), transparent 60%);
+  --nx-border: oklch(0.92 0 0);
+  /* These two sit BELOW the WCAG 1.4.11 3:1 minimum for a control boundary,
+   * deliberately, to keep the light border weight the palette is designed
+   * around. `contrast/accepted.ts` records each affected pairing with its
+   * measured ratio and is what keeps that visible rather than silent; the
+   * contrast suite reads that list, so neither token can drift further without
+   * failing. */
+  --nx-border-strong: color-mix(in srgb, oklch(0.92 0 0), black 25%);
+  --nx-input: oklch(0.94 0 0);
+  /* The boundary of a control that has NOTHING ELSE to identify it.
+   *
+   * A text field at --nx-input is identifiable without its edge: it carries a
+   * label, a placeholder, a value, and a focus ring the moment it is used. An
+   * unchecked checkbox or radio is only the box. Its border is not decoration
+   * around the control, it IS the control, so 1.4.11's 3:1 applies with nothing
+   * to fall back on -- and at the reference palette's border weight the box is
+   * effectively invisible.
+   *
+   * These were one token, which is why the reference weight could not be taken
+   * without losing the checkbox. They are two questions -- "how heavy is a field
+   * edge" and "can this control be seen at all" -- and they only shared an
+   * answer by accident. Splitting them is what lets the field borders match the
+   * reference while the controls stay identifiable.
+   *
+   * Solved to the LIGHTEST value that still clears 3:1 with the margin the
+   * contrast suite requires, against the darkest surface a control lands on, so
+   * it sits as close to the reference weight as the criterion permits. */
+  --nx-control-border: oklch(0.62 0 0);
+  --nx-ring: var(--nx-primary);
+
+  /* The base colour of the elevation ramp (--shadow-sm..xl, -inner-subtle,
+   * -neo). Each step mixes this down to its own alpha, so retinting every
+   * shadow at once is a single token change. */
+  --nx-shadow-color: oklch(0 0 0);
+
+  /* Chart colors for data visualization */
+  --nx-chart-1: var(--nx-primary);
+  --nx-chart-2: oklch(0.7399 0.1277 209.34);
+  --nx-chart-3: oklch(0.6273 0.17 149.2);
+  /* green-600 */
+  --nx-chart-4: oklch(0.7686 0.1646 70.11);
+  /* amber-500 */
+  --nx-chart-5: oklch(0.6368 0.2078 25.33);
+  /* red-500 */
+
+  /* Design tokens */
+  /* The one corner knob. Every tier below derives from it, so this single
+   * declaration re-rounds the whole admin and a plugin built against the
+   * published preset re-rounds with it. */
+  --radius: 0.5rem;
+
+  /* Control sizing — derived from a single height knob so control density
+   * scales from one place. Steps map to the control size variants:
+   * sm 32px, md 36px, default 40px, lg 44px. */
+  --nx-control-height: 2.5rem;
+  --nx-control-height-sm: calc(var(--nx-control-height) - 0.5rem);
+  --nx-control-height-md: calc(var(--nx-control-height) - 0.25rem);
+  --nx-control-height-lg: calc(var(--nx-control-height) + 0.25rem);
+
+  /* Field width caps — bound how wide a form control grows so a short value
+   * (a slug, a toggle, a single date) does not stretch to the full content
+   * width. `FieldShell` reads these with a literal fallback, so a consumer
+   * theme that predates these tokens still renders correctly; the token is
+   * what lets a theme retune the caps centrally instead. A length, not a
+   * colour, so it is declared once here rather than per light/dark block —
+   * a field's width does not change with the theme. */
+  --nx-field-half: 380px;
+  --nx-field-full: 760px;
+
+  /* Page shell — the inset from the content panel's edge to the page's content,
+   * and the measure that content is bounded to. `PageShell` spends these as
+   * GRID COLUMNS rather than as padding, because padding cannot be cancelled by
+   * a descendant: that is why full-bleed content previously had to be rendered
+   * OUTSIDE the wrapper to escape the measure, and why two wrappers each
+   * applying their own inset silently doubled it.
+   *
+   * A length rather than a colour, so it is declared once here rather than per
+   * light/dark block — a page's inset does not change with the theme. */
+  --nx-gutter: 2rem;
+  --nx-measure-form: 56rem;
+  --nx-measure-wide: 72rem;
+
+  /* The measure the content column is bounded to, declared here so a theme can
+   * retune it centrally and so the token resolves to a real value rather than
+   * to a `var()` fallback. `PageShell` overrides it INLINE per its `width`
+   * prop, which is what makes the three widths one grid template instead of
+   * three near-identical ones; this declaration is the value that applies when
+   * the grid is used without that component. */
+  --nx-shell-measure: var(--nx-measure-form);
+
+  /* The single vertical-rhythm token for a form section. `FormSection` applies
+   * it to every DIRECT child, so the card's top and bottom breathing room and
+   * the gap between two fields are one decision and cannot drift apart — the
+   * first child's top padding IS the card's top inset.
+   *
+   * The rhythm belongs to the section rather than to the rows it is handed. A
+   * section renders whatever children it is given, and cannot tell one row
+   * idiom from another; leaving each row to supply its own vertical padding
+   * makes the card's inset depend on which idiom the caller happened to reach
+   * for, and a row that supplies none renders flush against the borders. */
+  --nx-field-gap: 1.25rem;
+
+  /* Focus ring colors */
+  --nx-focus-ring: var(--nx-primary);
+  --nx-focus-ring-offset: oklch(1 0 0);
+  /* white */
+
+  /* Sidebar specific colors - using Slate scale */
+  --nx-sidebar-background: oklch(0.99 0 0);
+  /* flat with the content surface; nav is separated by borders, not fill */
+  /* Resting and active nav ink are the same value in light mode: nav labels sit
+   * at body-text weight rather than a step back from it, which is the reference
+   * palette's arrangement.
+   *
+   * So the active row is marked by its FILL (--nx-sidebar-accent) TOGETHER WITH
+   * a font-weight change, and the pair is load-bearing rather than decorative.
+   * The fill alone is about 1.11:1, far under the 3:1 WCAG 1.4.11 asks of
+   * information identifying a component's state, and there is no exemption for
+   * a large filled region -- that is 1.4.3, and it is about text. The weight
+   * change is what satisfies the criterion, being a difference that is not a
+   * colour and so carries no ratio at all.
+   *
+   * Removing `data-[active=true]:font-medium` from the sidebar menu buttons
+   * therefore leaves the nav with no conforming active state, and
+   * `contrast/__tests__/sidebar-ink-hierarchy.test.ts` fails per variant if
+   * either loses it.
+   *
+   * Dark mode keeps the two-step ink relationship instead, where a near-white
+   * active ink on a dark row is what separates the states. */
+  --nx-sidebar-foreground: oklch(0 0 0);
+  --nx-sidebar-primary: oklch(0 0 0);
+  --nx-sidebar-primary-foreground: oklch(1 0 0);
+  /* slate-50 */
+  --nx-sidebar-accent: oklch(0.94 0 0);
+  /* slate-100 */
+  --nx-sidebar-accent-foreground: oklch(0 0 0);
+  /* Below the 3:1 boundary minimum, deliberately, to match the border weight of
+   * the rest of the palette. Recorded in `contrast/accepted.ts`. */
+  --nx-sidebar-border: oklch(0.94 0 0);
+  --nx-sidebar-ring: var(--nx-primary);
+
+  /* Data table specific colors */
+  --nx-table-row-hover: oklch(0.97 0 0);
+  --nx-table-row-selected: var(--nx-primary);
+  --nx-table-border: var(--nx-border);
+}
+
+/* Dark theme overrides when using class-based theming */
+.dark {
+  /* Base colors - using Slate dark scale */
+  --nx-background: oklch(0 0 0);
+  /* ultra deep dark background (darker than slate-950) */
+  --nx-page-background: oklch(0.23 0 0);
+  /* Matches background in dark mode */
+  --nx-foreground: oklch(1 0 0);
+  /* slate-50 */
+
+  /* Component colors */
+  --nx-card: oklch(0.14 0 0);
+  /* raised one tonal step above --nx-background (222 47% 4%) so panels/cards
+   * read as distinct surfaces in dark mode instead of merging into the page */
+  --nx-card-foreground: oklch(1 0 0);
+  /* slate-50 */
+  /* Darkened toward the card elevation so borders, inputs, and muted text
+   * placed on a popover clear their WCAG minimums (border was 2.85:1, input
+   * 1.73:1); the surface was too light for its own contents. */
+  --nx-popover: oklch(0.18 0 0);
+  --nx-popover-foreground: oklch(1 0 0);
+  /* slate-50 */
+  /* A step above the card beneath it, carrying no chroma of its own: a hue here
+     would tint the header band independently of every surface around it. */
+  --nx-table-header-bg: oklch(0.1573 0 0);
+
+  /* Brand colors - Blue-Cyan Professional Palette (Dark Mode) */
+  --nx-primary: oklch(1 0 0); /* High contrast White for dark mode */
+  --nx-primary-foreground: oklch(0 0 0);
+
+  /* Secondary colors - using slate-800 for dark backgrounds */
+  --nx-secondary: oklch(0.25 0 0);
+  /* slate-800 */
+  --nx-secondary-foreground: oklch(1 0 0);
+  /* slate-50 */
+
+  /* Utility colors */
+  --nx-muted: oklch(0.23 0 0);
+  --nx-muted-foreground: oklch(0.72 0 0);
+  /* The hover and selected surface: one step lighter than --nx-muted so a row
+     under the pointer separates from a merely quiet one. Neutral, not the blue
+     it was once labelled -- a tinted accent reads as a status on a surface that
+     carries none. */
+  --nx-accent: oklch(0.32 0 0);
+  --nx-accent-foreground: oklch(1 0 0);
+  /* white */
+
+  /* State colors - WCAG 2.2 AA Compliant (Dark Mode).
+   * The base token is lightened from the fill color so it reads as text on the
+   * dark page at 4.5:1. The two statuses then resolve the on-color problem
+   * differently, because a fill light enough to read as text on a dark page is
+   * too light for white text: destructive keeps ONE value for base and fill
+   * and flips its ink to black (6.90:1), while success keeps a darker separate
+   * fill and keeps its ink white (4.80:1). Warning is already light enough to
+   * read on dark, so its base is unchanged here. */
+  /* Lightened red so it reads as text at WCAG 4.5:1 on the dark page and on the
+   * lighter popover surface (was 4.17:1 on the page, 4.25:1 on a popover). */
+  --nx-destructive: oklch(0.69 0.2 23.91);
+  /* Same value as the base: the button fill needs no darkening here because
+     its ink is black rather than white. */
+  --nx-destructive-solid: oklch(0.69 0.2 23.91);
+  /* Black, not white. The dark-mode fill is light enough that black on-color
+     text reads at 6.90:1 where white would fall below the minimum. */
+  --nx-destructive-foreground: oklch(0 0 0);
+  /* Lightened green so it reads as text at WCAG 4.5:1 on the dark page and on
+   * the lighter popover surface (was 4.17:1 on the page, 4.29:1 on a popover). */
+  /* Lightened a step so success ink clears 4.5:1 on --nx-muted with the margin
+   * the suite requires. Muted is the binding surface here, being the lightest
+   * of the dark surfaces this ink lands on; against card or page it was never
+   * close. */
+  --nx-success: oklch(0.61 0.1921 149.58);
+  /* Darker green fill so white on-color button text clears 4.5:1. */
+  --nx-success-solid: oklch(0.5225 0.1921 149.58);
+  --nx-success-foreground: oklch(1 0 0);
+  /* white */
+  --nx-warning: oklch(0.7686 0.1646 70.11);
+  /* amber-500 */
+  --nx-warning-foreground: oklch(0.2079 0.0399 265.73);
+  /* slate-900 */
+
+  /* Dimmed so the mark reads as highlighted rather than as a lamp on a dark
+   * page, while its own foreground stays dark enough to read against it. */
+  --nx-highlight: oklch(0.8 0.1425 101.06);
+  /* yellow-300-ish, pulled back for the dark surface */
+  --nx-highlight-foreground: oklch(0.2079 0.0399 265.73);
+  /* slate-900 */
+
+  /* Syntax colors (dark). Lightened rather than reused from light mode: the
+   * light hues sit near 0.45-0.5 lightness and disappear on the dark surface.
+   * Chroma is pulled back slightly so they don't vibrate against it. */
+  --nx-code-bg: oklch(0.1916 0.0228 266.36);
+  --nx-code-fg: oklch(0.9838 0.0035 247.86);
+  --nx-code-comment: oklch(0.6626 0.0364 256.79);
+  --nx-code-keyword: oklch(0.7482 0.1235 303.9);
+  --nx-code-string: oklch(0.7654 0.1476 152.1);
+  --nx-code-number: oklch(0.7807 0.1189 44.2);
+  --nx-code-function: oklch(0.7365 0.1163 254.6);
+  --nx-code-operator: oklch(0.7549 0.1234 8.4);
+  --nx-code-punctuation: oklch(0.6626 0.0364 256.79);
+  --nx-code-variable: oklch(0.7938 0.1052 62.3);
+  --nx-code-tag: oklch(0.7118 0.1476 27.5);
+  --nx-code-deleted: oklch(0.7118 0.1476 27.5);
+  --nx-code-inserted: oklch(0.7654 0.1476 152.1);
+
+  /* Element colors — 3-tier translucent border scale (white-alpha for dark).
+   * Recomputed as white-over-dark alpha (not a flipped hex) so dividers read
+   * on the deep background without glowing. The decorative tiers carry the same
+   * alphas as light mode, which lands the container edge at a matched 1.41:1 on
+   * the page (1.38:1 light), so a hairline weighs the same in both modes. */
+  /* Stronger than light: the surfaces beneath are mid-tone rather than white,
+   * so the same alpha suppresses less of them. Still black rather than a tinted
+   * scrim, because the modal above it supplies the contrast. */
+  --nx-overlay: oklch(0 0 0 / 0.7);
+  --nx-overlay-strong: oklch(0 0 0 / 0.85);
+  --nx-overlay-soft: oklch(0 0 0 / 0.5);
+  --nx-border-subtle: color-mix(in srgb, oklch(0.26 0 0), transparent 60%);
+  --nx-border: oklch(0.26 0 0);
+  /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 3.00:1). */
+  --nx-border-strong: oklch(0.5444 0 0);
+  /* Brightened so the field border clears WCAG 3:1 on the lighter popover
+   * surface as well as the page and card (was 1.73:1 on a popover). */
+  --nx-input: oklch(0.5445 0 0);
+  /* Dark mode never gave up the boundary minimum, so the control border simply
+     tracks the field border here and the split costs nothing. */
+  --nx-control-border: oklch(0.5445 0 0);
+  --nx-ring: var(--nx-primary);
+
+  /* Black in dark mode too: the ramp reads as depth against the deep surfaces
+   * rather than as a glow, which a lightened shadow colour would produce.
+   * One --shadow-* ramp serves both modes and inlines a single set of
+   * color-mix opacities, so this token is the only place elevation is
+   * retuned -- overriding it resolves the whole ramp to that hue. */
+  --nx-shadow-color: oklch(0 0 0);
+
+  /* Chart colors for data visualization (same as light mode) */
+  --nx-chart-1: var(--nx-primary);
+  --nx-chart-2: oklch(0.7399 0.1277 209.34);
+  --nx-chart-3: oklch(0.7229 0.1921 149.58);
+  /* green-500 */
+  --nx-chart-4: oklch(0.7686 0.1646 70.11);
+  /* amber-500 */
+  --nx-chart-5: oklch(0.6368 0.2078 25.33);
+  /* red-500 */
+
+  /* Sidebar specific colors - dark mode */
+  --nx-sidebar-background: oklch(0.18 0 0);
+  /* flat with the content surface; nav is separated by borders, not fill */
+  /* Resting nav ink, dimmed off slate-50 so it sits a step below
+   * --nx-sidebar-accent-foreground the way the light pair does: the lightness
+   * gap here (0.164) is the same one light mode puts between slate-600 and
+   * slate-900, so an active row reads as emphasised by its ink and not only by
+   * its fill. Chroma and hue track the theme's other secondary ink
+   * (--nx-muted-foreground) so lightness alone carries the hierarchy. */
+  --nx-sidebar-foreground: oklch(0.72 0 0);
+  --nx-sidebar-primary: oklch(1 0 0);
+  /* slate-50 */
+  --nx-sidebar-primary-foreground: oklch(0 0 0);
+  --nx-sidebar-accent: oklch(0.32 0 0);
+  --nx-sidebar-accent-foreground: oklch(1 0 0);
+  /* slate-50 */
+  /* Lightened so the sidebar border clears WCAG 3:1 on its surface (was 1.19:1). */
+  --nx-sidebar-border: oklch(0.519 0 0);
+  --nx-sidebar-ring: var(--nx-primary);
+
+  /* Data table specific colors - dark mode */
+  --nx-table-row-hover: oklch(0.23 0 0);
+  --nx-table-row-selected: var(--nx-primary);
+  --nx-table-border: var(--nx-border);
+  /* inherit the retuned white-alpha border (was a fixed faint slate) */
+}
+
+/* ============================================================
+ * Page shell
+ * ============================================================
+ *
+ * The gutter and the measure are ONE grid definition, spent as columns rather
+ * than as padding. That is load-bearing rather than stylistic:
+ *
+ *  - Padding cannot be cancelled by a descendant, so a block that must run
+ *    edge-to-edge previously had to be rendered OUTSIDE the wrapper imposing
+ *    the measure. `.nx-bleed` turns that from an accident into a declaration.
+ *  - Two wrappers that each apply an inset silently add. As columns there is
+ *    one declaration, so double-padding is unrepresentable rather than merely
+ *    discouraged.
+ *  - Every direct child defaults to the `content` column, so a page header and
+ *    the card beneath it cannot disagree about their left edge.
+ *
+ * Centring comes from the two outer tracks being equal rather than from
+ * `margin-inline: auto` on a max-width box, which does nothing at panel widths
+ * where the cap does not bind.
+ */
+@layer components {
+  /* A form section's vertical rhythm, applied to every DIRECT child.
+   *
+   * Plain CSS rather than a Tailwind utility on the element, for two reasons.
+   * The parenthesised custom-property shorthand is v4-only, so the same class
+   * compiles to a rule under one Tailwind major and to nothing under the other,
+   * and the section renders flush wherever it compiles to nothing — silently,
+   * because the markup is identical either way. And an arbitrary-value token is
+   * EXTRACTED from any file the scanner reads, a comment or a test string
+   * included, so merely naming one of these utilities in prose emits its rule;
+   * a malformed spelling anywhere in the repository fails the whole stylesheet.
+   *
+   * A rule shipped in the theme has neither property: it is the same CSS under
+   * both majors, and there is no token for a scanner to find.
+   *
+   * Children must not pad themselves. The two paddings are additive, so a row
+   * carrying its own `py-*` doubles the rhythm on the sections that are already
+   * correct. */
+  .nx-form-section-rows > * {
+    padding-block: var(--nx-field-gap);
+  }
+
+  .nx-page-shell {
+    display: grid;
+    /* The outer tracks are `minmax(gutter, 1fr)` rather than a fixed gutter so
+     * the grid always spans its container: a fixed pair would total only
+     * `measure + 2 * gutter`, leaving `full-start`/`full-end` short of the
+     * panel's edges in anything wider, and a `Bleed` child short with them. The
+     * `1fr` maximum absorbs the surplus while `gutter` holds as the minimum.
+     *
+     * Their being equal is also what centres the content column, so no
+     * `justify-content` is declared: with flexible tracks the grid fills its
+     * container and there is no free space for it to distribute. */
+    grid-template-columns:
+      [full-start] minmax(var(--nx-gutter), 1fr)
+      [content-start] minmax(0, var(--nx-shell-measure))
+      [content-end] minmax(var(--nx-gutter), 1fr)
+      [full-end];
+    align-content: start;
+  }
+
+  /* `min-width: 0` because a grid item's default `min-width: auto` refuses to
+   * shrink below its content, which lets one wide descendant — a long code
+   * string, a table — push the column past the measure it was given. */
+  .nx-page-shell > * {
+    grid-column: content;
+    min-width: 0;
+  }
+
+  /* Scoped to a DIRECT child: the named lines exist on this grid alone, so a
+   * `.nx-bleed` nested deeper resolves against a grid that never declared them.
+   * Writing the rule this way means such a case is inert rather than
+   * mysteriously half-working. */
+  .nx-page-shell > .nx-bleed {
+    grid-column: full;
+  }
+}
+
+/* The gutter steps with the content PANEL rather than the viewport: the panel's
+ * width changes when a sidebar opens, and the panel is what the page sits in.
+ * `content` is the container the admin's <main> already names. The step values
+ * match Payload's --gutter-h ladder (32 / 24 / 16).
+ *
+ * The override lands on `.nx-page-shell`, a DESCENDANT of that container. A
+ * container query styles only elements inside its container, so a rule naming
+ * `:root` or `.nextly-admin` — both ancestors of the `<main>` that declares it —
+ * never matches, and the gutter keeps its widest value at every panel size. */
+@container content (max-width: 1024px) {
+  .nx-page-shell {
+    --nx-gutter: 1.5rem;
+  }
+}
+
+@container content (max-width: 768px) {
+  .nx-page-shell {
+    --nx-gutter: 1rem;
+  }
+}