@nextlyhq/ui 0.0.2-alpha.5 → 0.0.2-alpha.50

package/dist/theme.css

@@ -0,0 +1,997 @@
+/**
+ * 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-border: var(--nx-border);
+  --color-border-subtle: var(--nx-border-subtle);
+  --color-border-strong: var(--nx-border-strong);
+  --color-input: var(--nx-input);
+  --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; distinct from the text-tuned base so
+   * white on-color text stays AA in both modes. */
+  --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 at the shipped --radius: 0 they
+   * resolve to 4px and 8px — visibly round inside a square admin. Nothing in the
+   * repo uses them. Treat them as off-contract and pick from sm/md/lg.
+   *
+   * What --radius: 0 really does: `lg` is 0, and `sm` and `md` compute to -4px
+   * and -2px. They render square only because border-radius clamps a negative
+   * length to 0 at used-value time. The token itself stays negative, so reading
+   * `--radius-sm` for padding, an inset, or through getComputedStyle yields
+   * -4px, not 0. Anything that consumes a step as a length rather than as a
+   * corner must clamp it itself.
+   *
+   * 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 {
+  --font-sans: var(--font-inter), Inter, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-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(1 0 0);
+  /* Pure white for weightless aesthetic */
+  --nx-page-background: oklch(0.9818 0 0);
+  /* #f9f9f9 for page content area */
+  --nx-foreground: oklch(0.2079 0.0399 265.73);
+  /* slate-900 */
+
+  /* Component colors */
+  --nx-card: oklch(1 0 0);
+  /* pure white for cards to pop on off-white bg */
+  --nx-card-foreground: oklch(0.2079 0.0399 265.73);
+  /* slate-900 */
+  --nx-popover: oklch(1 0 0);
+  /* white */
+  --nx-popover-foreground: oklch(0.2079 0.0399 265.73);
+  /* slate-900 */
+
+  /* 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.9684 0.0068 247.9);
+  /* slate-100 */
+  --nx-secondary-foreground: oklch(0.2079 0.0399 265.73);
+  /* slate-900 */
+
+  /* Utility colors */
+  --nx-muted: oklch(0.9696 0 0);
+  /* Darkened so muted text clears WCAG 4.5:1 on the muted surface (was 4.35:1). */
+  --nx-muted-foreground: oklch(0.54 0.0407 257.44);
+  /* slate-500 */
+  --nx-accent: oklch(0.5547 0.0407 257.44);
+  /* Slate-500 per user request #64748b */
+  --nx-accent-foreground: oklch(1 0 0);
+  /* white */
+
+  /* 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 white on-color text. One value cannot serve both in
+   * dark mode (a fill dark enough for white text is too dark to read as text
+   * on the page), so they diverge there. */
+  /* Darkened from red-500; renders as #d92c32, ~4.8:1 as text on white. */
+  --nx-destructive: oklch(0.5778 0.2078 25.33);
+  --nx-destructive-solid: oklch(0.5778 0.2078 25.33);
+  --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.53 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.565 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.541 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.541 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. */
+  --nx-border-subtle: oklch(0 0 0 / 0.08);
+  --nx-border: oklch(0 0 0 / 0.14);
+  /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 2.11:1). */
+  --nx-border-strong: oklch(0 0 0 / 0.502);
+  /* Darkened so the field border clears WCAG 3:1 on the page (was 2.32:1). */
+  --nx-input: oklch(0.6454 0.0116 286.11);
+  --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);
+  /* cyan-500 */
+  --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 */
+  --radius: 0px;
+
+  /* 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);
+
+  /* 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: var(--nx-background);
+  /* flat with the content surface; nav is separated by borders, not fill */
+  --nx-sidebar-foreground: oklch(0.372 0.0392 257.3);
+  /* slate-700 */
+  --nx-sidebar-primary: oklch(0.2079 0.0399 265.73);
+  /* slate-900 */
+  --nx-sidebar-primary-foreground: oklch(0.9838 0.0035 247.86);
+  /* slate-50 */
+  --nx-sidebar-accent: oklch(0.9684 0.0068 247.9);
+  /* slate-100 */
+  --nx-sidebar-accent-foreground: oklch(0.2079 0.0399 265.73);
+  /* slate-900 */
+  /* Darkened so the sidebar border clears WCAG 3:1 on its surface (was 1.23:1). */
+  --nx-sidebar-border: oklch(0.6446 0.0126 255.53);
+  /* slate-200 */
+  --nx-sidebar-ring: var(--nx-primary);
+
+  /* Data table specific colors */
+  --nx-table-row-hover: oklch(0.9848 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.1358 0.0163 262.71);
+  /* ultra deep dark background (darker than slate-950) */
+  --nx-page-background: oklch(0.1358 0.0163 262.71);
+  /* Matches background in dark mode */
+  --nx-foreground: oklch(0.9838 0.0035 247.86);
+  /* slate-50 */
+
+  /* Component colors */
+  --nx-card: oklch(0.1916 0.0228 266.36);
+  /* 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(0.9838 0.0035 247.86);
+  /* 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.24 0.0249 257.44);
+  /* slate-800 */
+  --nx-popover-foreground: oklch(0.9838 0.0035 247.86);
+  /* slate-50 */
+
+  /* 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.2079 0.0399 265.73);
+  /* slate-900 */
+
+  /* Secondary colors - using slate-800 for dark backgrounds */
+  --nx-secondary: oklch(0.28 0.0369 259.97);
+  /* slate-800 */
+  --nx-secondary-foreground: oklch(0.9838 0.0035 247.86);
+  /* slate-50 */
+
+  /* Utility colors */
+  --nx-muted: oklch(0.28 0.0369 259.97);
+  /* slate-800 */
+  --nx-muted-foreground: oklch(0.7107 0.0351 256.79);
+  /* slate-400 */
+  --nx-accent: oklch(
+    0.5547 0.0407 257.44
+  ); /* Slate-500 per user request #64748b */
+  --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; `-solid` keeps the darker fill so white on-color text
+   * on buttons still clears 4.5: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.65 0.2078 25.33);
+  /* Darker red fill so white on-color button text clears 4.5:1. */
+  --nx-destructive-solid: oklch(0.5778 0.2078 25.33);
+  --nx-destructive-foreground: oklch(1 0 0);
+  /* white */
+  /* 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). */
+  --nx-success: oklch(0.6 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. */
+  --nx-border-subtle: oklch(1 0 0 / 0.08);
+  --nx-border: oklch(1 0 0 / 0.14);
+  /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 3.00:1). */
+  --nx-border-strong: oklch(1 0 0 / 0.418);
+  /* 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.54 0.0128 285.92);
+  --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. */
+  --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);
+  /* cyan-500 */
+  --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: var(--nx-background);
+  /* 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.82 0.0351 256.79);
+  --nx-sidebar-primary: oklch(0.9838 0.0035 247.86);
+  /* slate-50 */
+  --nx-sidebar-primary-foreground: oklch(0.2079 0.0399 265.73);
+  /* slate-900 */
+  --nx-sidebar-accent: oklch(0.28 0.0369 259.97);
+  /* slate-800 */
+  --nx-sidebar-accent-foreground: oklch(0.9838 0.0035 247.86);
+  /* slate-50 */
+  /* Lightened so the sidebar border clears WCAG 3:1 on its surface (was 1.19:1). */
+  --nx-sidebar-border: oklch(0.4975 0.0129 257.43);
+  --nx-sidebar-ring: var(--nx-primary);
+
+  /* Data table specific colors - dark mode */
+  --nx-table-row-hover: oklch(0.28 0.0369 259.97);
+  /* slate-800 */
+  --nx-table-row-selected: var(--nx-primary);
+  --nx-table-border: var(--nx-border);
+  /* inherit the retuned white-alpha border (was a fixed faint slate) */
+}