@nextlyhq/ui 0.0.2-alpha.33 → 0.0.2-alpha.35

package/dist/theme.css

@@ -0,0 +1,859 @@
+/**
+ * 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%);
+  --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%);
+  --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 */
+  --font-sans: var(--font-inter), Inter, sans-serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+
+  /* 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 */
+
+  /* Font Weights */
+  --font-normal: 400;
+  /* Body text, captions */
+  --font-medium: 500;
+  /* Subheadings, emphasis */
+  --font-semibold: 600;
+  /* Headings, buttons */
+  --font-bold: 700;
+  /* Strong emphasis (rarely used) */
+
+  /* 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)
+   * Derived from the single --radius knob (shadcn pattern). With
+   * --radius: 0 (sharp-corner design) every step resolves to 0.
+   * ============================================ */
+  --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)
+   * ============================================ */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* Custom Functional Shadows (Fixes build warnings from arbitrary values) */
+  --shadow-inner-subtle: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
+  --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 rgba(0, 0, 0, 0.1);
+
+  /* ============================================
+   * 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);
+}
+
+/* ============================================
+ * 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);
+  --nx-muted-foreground: oklch(0.5547 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 */
+  --nx-destructive: oklch(0.6368 0.2078 25.33);
+  /* red-500 (#ef4444) */
+  --nx-destructive-foreground: oklch(1 0 0);
+  /* white */
+  --nx-success: oklch(0.6273 0.17 149.2);
+  /* green-600 (#16a34a) - AA compliant */
+  --nx-success-foreground: oklch(1 0 0);
+  /* white */
+  --nx-warning: oklch(0.7686 0.1646 70.11);
+  /* amber-500 (#f59e0b) */
+  --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);
+  --nx-code-comment: oklch(0.5547 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);
+  --nx-code-punctuation: oklch(0.5547 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).
+   * Was a single --nx-border at 5% black (~1.05:1, effectively invisible).
+   * subtle = decorative dividers/cards; default = tables/groups;
+   * strong = interactive control edges (inputs/checkbox) for prominence. */
+  --nx-border-subtle: oklch(0 0 0 / 0.08);
+  --nx-border: oklch(0 0 0 / 0.13);
+  --nx-border-strong: oklch(0 0 0 / 0.3);
+  --nx-input: oklch(
+    0.7384 0.0116 286.11
+  ); /* zinc-400: stronger visible field border (was zinc-300, too faint) */
+  --nx-ring: var(--nx-primary);
+
+  /* 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 */
+  --nx-sidebar-border: oklch(0.929 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 */
+  --nx-popover: oklch(0.369 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) */
+  --nx-destructive: oklch(0.6368 0.2078 25.33);
+  /* red-500 */
+  --nx-destructive-foreground: oklch(1 0 0);
+  /* white */
+  --nx-success: oklch(0.7229 0.1921 149.58);
+  /* green-500 - brighter for dark mode */
+  --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. Was ~1.2:1 (too faint). */
+  --nx-border-subtle: oklch(1 0 0 / 0.08);
+  --nx-border: oklch(1 0 0 / 0.13);
+  --nx-border-strong: oklch(1 0 0 / 0.34);
+  --nx-input: oklch(
+    0.4987 0.0128 285.92
+  ); /* stronger visible field border (was zinc-700, too faint) */
+  --nx-ring: var(--nx-primary);
+
+  /* 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 */
+  --nx-sidebar-foreground: oklch(0.9838 0.0035 247.86);
+  /* slate-50 */
+  --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 */
+  --nx-sidebar-border: oklch(0.2321 0.0129 257.43);
+  /* subtle slate-900 */
+  --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) */
+}