/* ============================================================ n4n · COLOR TOKENS — the app.n4n.ai console language Extracted from the production console (n4n.ai/app, Tailwind v4 zinc/indigo palette; oklch values are byte-identical to the compiled console bundle). Light-first with a class/attribute dark theme. Token NAMES are unchanged so every component and UI kit re-themes automatically. ============================================================ */ :root { /* ---- Base neutrals (light) ---- */ --n-void: #FFFFFF; /* chrome: sidebar / topbar */ --n-bg: oklch(98.5% 0 0); /* app canvas (zinc-50) */ --n-bg-2: #FFFFFF; /* inputs / raised fields */ --n-surface: #ffffffcc; /* translucent overlay surface */ --n-surface-1: #FFFFFF; /* solid card */ --n-surface-2: oklch(96.7% .001 286.375); /* hover (zinc-100) */ --n-surface-3: oklch(92% .004 286.32); /* active / pressed (zinc-200) */ /* ---- Hairlines & borders ---- */ --n-line-soft: oklch(96.7% .001 286.375); /* inner dividers (zinc-100) */ --n-line: oklch(92% .004 286.32); /* default border (zinc-200) */ --n-line-2: oklch(87.1% .006 286.286); /* stronger border (zinc-300) */ --n-line-glow: oklch(78.5% .115 274.713); /* accent-tinted border (indigo-300) */ /* ---- Text ---- */ --n-text: oklch(21% .006 285.885); /* primary (zinc-900) */ --n-text-2: oklch(44.2% .017 285.786); /* secondary (zinc-600) */ --n-text-3: oklch(70.5% .015 286.067); /* muted / placeholder (zinc-400) */ --n-text-invert: #FFFFFF; /* ---- Accent: indigo (links, focus, active marks, data) ---- */ --n-accent: oklch(58.5% .233 277.117); /* indigo-500 */ --n-accent-hi: oklch(67.3% .182 276.935); /* indigo-400 */ --n-accent-lo: oklch(51.1% .262 276.966); /* indigo-600 — link text */ --n-accent-dim: oklch(96.2% .018 272.314); /* indigo-50 wash */ --n-accent-soft: oklch(93% .034 272.788); /* indigo-100 wash */ --n-on-accent: #FFFFFF; /* ---- Primary action: solid near-black neutral (NOT the accent) ---- Console primary buttons are bg-zinc-900 → hover zinc-800 with white text; the dark theme inverts them to zinc-100 with zinc-900 text. */ --n-action: oklch(21% .006 285.885); /* zinc-900 */ --n-action-hi: oklch(27.4% .006 286.033); /* hover (zinc-800) */ --n-on-action: #FFFFFF; /* ---- Product spectrum (model/provider tones — see modelTone()) ---- */ --n-ai: #0EA5A0; /* anthropic — teal */ --n-mail: #2F6FED; /* google — blue */ --n-social: #E5487F; /* mistral — pink */ --n-web: #7A5AF8; /* meta — violet */ --n-cyan: #0FA9DE; /* openai — cyan */ --n-amber: #F5A623; /* deepseek — amber */ /* ---- Semantic (badge anatomy: -dim bg · -line border · text · -hi dot) ---- */ --n-success: oklch(50.8% .118 165.612); /* emerald-700 text */ --n-success-hi: oklch(69.6% .17 162.48); /* emerald-500 dot */ --n-success-dim: oklch(97.9% .021 166.113); /* emerald-50 bg */ --n-success-line: oklch(90.5% .093 164.15); /* emerald-200 border */ --n-warning: oklch(55.5% .163 48.998); /* amber-700 */ --n-warning-hi: oklch(76.9% .188 70.08); /* amber-500 */ --n-warning-dim: oklch(98.7% .022 95.277); /* amber-50 */ --n-warning-line: oklch(92.4% .12 95.746); /* amber-200 */ --n-danger: oklch(51.4% .222 16.935); /* rose-700 */ --n-danger-hi: oklch(64.5% .246 16.439); /* rose-500 */ --n-danger-dim: oklch(96.9% .015 12.422); /* rose-50 */ --n-danger-line: oklch(89.2% .058 10.001); /* rose-200 */ --n-info: oklch(45.7% .24 277.023); /* indigo-700 */ --n-info-hi: oklch(58.5% .233 277.117); /* indigo-500 */ --n-info-dim: oklch(96.2% .018 272.314); /* indigo-50 */ --n-info-line: oklch(87% .065 274.039); /* indigo-200 */ /* ---- Signature gradients ---- */ /* Brand mark: indigo-500 → violet-600 → fuchsia-600, always with white text and a ring-1 white/25 (the "n4" logo chip). */ --n-brand: linear-gradient(to bottom right, oklch(58.5% .233 277.117), oklch(54.1% .281 293.009), oklch(59.1% .293 322.896)); /* @kind other */ --n-aurora: var(--n-brand); /* legacy alias — kits reference it */ --n-plasma: linear-gradient(to bottom right, oklch(58.5% .233 277.117), oklch(54.1% .281 293.009)); /* avatar fallback (indigo→violet) */ --n-glass: linear-gradient(180deg, #ffffffe6 0%, #ffffff99 100%); /* @kind other */ /* ---- Semantic aliases (use these in components) ---- */ --surface-page: var(--n-bg); --surface-card: var(--n-surface-1); --surface-raised: var(--n-surface-2); --surface-pop: var(--n-surface-3); --text-primary: var(--n-text); --text-body: var(--n-text-2); --text-muted: var(--n-text-3); --border-default: var(--n-line); --border-strong: var(--n-line-2); --focus-ring: var(--n-accent); color-scheme: light; } /* ============================================================ DARK THEME — opt-in via (design previews) or (the production console). Same token names, remapped to the console's dark palette: zinc-950 chrome and canvas, zinc-900 cards, zinc-800 hairlines, indigo-400 accent, inverted (white) primary action. ============================================================ */ :root[data-theme="dark"], .dark { /* ---- Base neutrals (dark) ---- */ --n-void: oklch(14.1% .005 285.823); /* chrome (zinc-950) */ --n-bg: oklch(14.1% .005 285.823); /* canvas (zinc-950) */ --n-bg-2: oklch(14.1% .005 285.823); /* inputs (zinc-950) */ --n-surface: #18181bcc; /* translucent overlay */ --n-surface-1: oklch(21% .006 285.885); /* card (zinc-900) */ --n-surface-2: oklch(27.4% .006 286.033); /* hover (zinc-800) */ --n-surface-3: oklch(37% .013 285.805); /* active (zinc-700) */ /* ---- Hairlines & borders ---- */ --n-line-soft: oklch(27.4% .006 286.033); /* inner dividers (zinc-800) */ --n-line: oklch(27.4% .006 286.033); /* default border (zinc-800) */ --n-line-2: oklch(37% .013 285.805); /* stronger border (zinc-700) */ --n-line-glow: oklch(58.5% .233 277.117 / .5); /* indigo-500/50 */ /* ---- Text ---- */ --n-text: oklch(96.7% .001 286.375); /* zinc-100 */ --n-text-2: oklch(70.5% .015 286.067); /* zinc-400 */ --n-text-3: oklch(55.2% .016 285.938); /* zinc-500 */ --n-text-invert: oklch(21% .006 285.885); /* ---- Accent, lifted ---- */ --n-accent: oklch(67.3% .182 276.935); /* indigo-400 */ --n-accent-hi: oklch(78.5% .115 274.713); /* indigo-300 */ --n-accent-lo: oklch(58.5% .233 277.117); /* indigo-500 */ --n-accent-dim: oklch(58.5% .233 277.117 / .1); /* indigo-500/10 */ --n-accent-soft: oklch(58.5% .233 277.117 / .15); /* indigo-500/15 */ --n-on-accent: #FFFFFF; /* ---- Primary action, inverted ---- */ --n-action: oklch(96.7% .001 286.375); /* zinc-100 */ --n-action-hi: #FFFFFF; --n-on-action: oklch(21% .006 285.885); /* zinc-900 */ /* ---- Semantic, lifted (400 text/dot · /10 bg · /30 border) ---- */ --n-success: oklch(76.5% .177 163.223); /* emerald-400 */ --n-success-hi: oklch(76.5% .177 163.223); --n-success-dim: oklch(69.6% .17 162.48 / .1); --n-success-line: oklch(69.6% .17 162.48 / .3); --n-warning: oklch(82.8% .189 84.429); /* amber-400 */ --n-warning-hi: oklch(82.8% .189 84.429); --n-warning-dim: oklch(76.9% .188 70.08 / .1); --n-warning-line: oklch(76.9% .188 70.08 / .3); --n-danger: oklch(71.2% .194 13.428); /* rose-400 */ --n-danger-hi: oklch(71.2% .194 13.428); --n-danger-dim: oklch(64.5% .246 16.439 / .1); --n-danger-line: oklch(64.5% .246 16.439 / .3); --n-info: oklch(67.3% .182 276.935); /* indigo-400 */ --n-info-hi: oklch(67.3% .182 276.935); --n-info-dim: oklch(58.5% .233 277.117 / .1); --n-info-line: oklch(58.5% .233 277.117 / .3); /* ---- Gradients (brand stays saturated on dark) ---- */ --n-glass: linear-gradient(180deg, #18181be6 0%, #18181b99 100%); color-scheme: dark; }