/* * LabsNinja design tokens — extracted from the LabsNinja Redesign handoff * (labsninja-scim-csp/ai-review-loop/redesign-source/labsninja/project/tokens.jsx). * * Three palettes (dark, light, midnight) are exposed via the `data-theme` * attribute on . The default (no attribute) is dark. * * Naming convention: all design-system variables are prefixed `--ln-` to avoid * collisions with the existing per-template `--bg`/`--accent`/etc. variables * declared inline in layout.html and public_layout.html. Those existing * variables are NOT touched in this cycle; new redesign components should * consume the `--ln-*` set instead. * * Added: cycle 2 (foundation). No backend behavior changes. */ /* ---------- Default (dark) palette ---------- */ :root, :root[data-theme='dark'] { /* Surfaces */ --ln-bg: #0A0E15; --ln-bg-alt: #0E131C; --ln-surface: #141A24; --ln-surface-2: #1A2230; --ln-surface-3: #22293A; /* Borders / rules */ --ln-border: rgba(255, 255, 255, 0.07); --ln-border-hi: rgba(255, 255, 255, 0.14); --ln-rule: rgba(255, 255, 255, 0.06); /* Foreground / text */ --ln-fg-hi: #F2F4F8; --ln-ink: #F2F4F8; --ln-fg: #C7CDD8; --ln-ink-soft: #C7CDD8; --ln-fg-mute: #7C8597; --ln-fg-dim: #525B6E; /* Brand accent (indigo) */ --ln-indigo: oklch(0.68 0.18 285); --ln-indigo-in: oklch(0.20 0.10 285); --ln-indigo-soft: oklch(0.68 0.18 285 / 0.15); --ln-indigo-border: oklch(0.68 0.18 285 / 0.40); /* Status palette */ --ln-amber: #F5C24A; --ln-amber-soft: rgba(245, 194, 74, 0.14); --ln-amber-border: rgba(245, 194, 74, 0.35); --ln-blade: oklch(0.74 0.16 145); --ln-blade-soft: oklch(0.74 0.16 145 / 0.14); --ln-blade-border: oklch(0.74 0.16 145 / 0.35); --ln-ruby: oklch(0.68 0.20 25); --ln-ruby-soft: oklch(0.68 0.20 25 / 0.14); --ln-ruby-border: oklch(0.68 0.20 25 / 0.35); --ln-sky: oklch(0.80 0.10 235); --ln-sky-soft: oklch(0.80 0.10 235 / 0.14); /* Typography */ --ln-font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif; --ln-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Radius scale */ --ln-radius-xs: 4px; --ln-radius-sm: 6px; --ln-radius: 8px; --ln-radius-md: 10px; --ln-radius-lg: 12px; --ln-radius-xl: 14px; --ln-radius-2xl: 16px; --ln-radius-pill: 999px; /* Elevation / shadow tokens (named after redesign surfaces) */ --ln-shadow-modal: 0 40px 80px -40px rgba(0, 0, 0, 0.6); --ln-shadow-card-inset: 0 40px 80px -40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; --ln-glow-blade: 0 0 40px -8px oklch(0.74 0.16 145); } /* ---------- Light (warm paper) palette ---------- */ :root[data-theme='light'] { --ln-bg: #F7F5F0; --ln-bg-alt: #EFEBE2; --ln-surface: #FFFFFF; --ln-surface-2: #F4F1EA; --ln-surface-3: #EAE6DD; --ln-border: rgba(14, 14, 16, 0.10); --ln-border-hi: rgba(14, 14, 16, 0.22); --ln-rule: rgba(14, 14, 16, 0.08); --ln-fg-hi: #0E0E10; --ln-ink: #0E0E10; --ln-fg: #3A3833; --ln-ink-soft: #3A3833; --ln-fg-mute: #6E6B62; --ln-fg-dim: #A09C90; --ln-indigo: oklch(0.52 0.22 285); --ln-indigo-in: #FFFFFF; --ln-indigo-soft: oklch(0.52 0.22 285 / 0.10); --ln-indigo-border: oklch(0.52 0.22 285 / 0.30); --ln-amber: #B27A0F; --ln-amber-soft: rgba(178, 122, 15, 0.10); --ln-amber-border: rgba(178, 122, 15, 0.30); --ln-blade: oklch(0.52 0.16 145); --ln-blade-soft: oklch(0.52 0.16 145 / 0.10); --ln-blade-border: oklch(0.52 0.16 145 / 0.30); --ln-ruby: oklch(0.55 0.20 25); --ln-ruby-soft: oklch(0.55 0.20 25 / 0.10); --ln-ruby-border: oklch(0.55 0.20 25 / 0.30); --ln-sky: oklch(0.55 0.14 235); --ln-sky-soft: oklch(0.55 0.14 235 / 0.10); } /* ---------- Midnight (deep blue) palette ---------- */ :root[data-theme='midnight'] { --ln-bg: #0B1530; --ln-bg-alt: #0F1A3A; --ln-surface: #16224A; --ln-surface-2: #1B2A5C; --ln-surface-3: #24356E; --ln-border: rgba(255, 255, 255, 0.08); --ln-border-hi: rgba(255, 255, 255, 0.18); --ln-rule: rgba(255, 255, 255, 0.06); --ln-fg-hi: #EEF1FB; --ln-ink: #EEF1FB; --ln-fg: #B9C2E3; --ln-ink-soft: #B9C2E3; --ln-fg-mute: #7783AE; --ln-fg-dim: #4C5985; --ln-indigo: oklch(0.72 0.20 285); --ln-indigo-in: oklch(0.18 0.10 285); --ln-indigo-soft: oklch(0.72 0.20 285 / 0.18); --ln-indigo-border: oklch(0.72 0.20 285 / 0.45); --ln-amber: #FFD37A; --ln-amber-soft: rgba(255, 211, 122, 0.15); --ln-amber-border: rgba(255, 211, 122, 0.40); --ln-blade: oklch(0.78 0.16 165); --ln-blade-soft: oklch(0.78 0.16 165 / 0.16); --ln-blade-border: oklch(0.78 0.16 165 / 0.40); --ln-ruby: oklch(0.72 0.20 18); --ln-ruby-soft: oklch(0.72 0.20 18 / 0.16); --ln-ruby-border: oklch(0.72 0.20 18 / 0.40); --ln-sky: oklch(0.82 0.12 220); --ln-sky-soft: oklch(0.82 0.12 220 / 0.14); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }