/* ============================================================
loradex — design tokens
Reference this file from any project (CSS custom properties).
Toggle dark mode with .
Fonts (load once, e.g. in ):
============================================================ */
:root {
/* — Brand accent (violet) — */
--lx-accent: #7C5CF5;
--lx-accent-hover: #6B4BEC;
--lx-accent-active: #5A3DD6;
--lx-accent-soft: #EFEBFE; /* tinted backgrounds */
--lx-accent-on: #FFFFFF; /* text/icon on accent */
/* — Neutrals (light theme) — */
--lx-bg: #FFFFFF;
--lx-surface: #F7F7F8;
--lx-surface-2: #F0F0F2;
--lx-border: #E6E6E9;
--lx-border-strong: #D6D6DB;
--lx-text: #15161A;
--lx-text-muted: #6B7280;
--lx-text-faint: #9CA3AF;
/* — Semantic — */
--lx-success: #16A06B;
--lx-warning: #E0852E;
--lx-danger: #E5484D;
--lx-info: #7C5CF5;
/* — Code / terminal surface (stays dark in both themes) — */
--lx-code-bg: #0E1016;
--lx-code-text: #E7E9EE;
/* — Typography — */
--lx-font-display: "Space Grotesk", system-ui, sans-serif;
--lx-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
--lx-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
/* — Radius — */
--lx-radius-sm: 6px;
--lx-radius-md: 8px;
--lx-radius-lg: 12px;
--lx-radius-xl: 16px;
--lx-radius-pill: 999px;
/* — Spacing (4px base) — */
--lx-space-1: 4px;
--lx-space-2: 8px;
--lx-space-3: 12px;
--lx-space-4: 16px;
--lx-space-5: 20px;
--lx-space-6: 24px;
--lx-space-8: 32px;
--lx-space-10: 40px;
/* — Elevation — */
--lx-shadow-sm: 0 1px 2px rgba(16,17,22,.06);
--lx-shadow-md: 0 2px 10px rgba(16,17,22,.08);
--lx-shadow-lg: 0 12px 32px rgba(16,17,22,.12);
}
[data-theme="dark"] {
--lx-accent: #8B6CFF;
--lx-accent-hover: #9D82FF;
--lx-accent-active: #7C5CF5;
--lx-accent-soft: rgba(139,108,255,.16);
--lx-accent-on: #0E0F13;
--lx-bg: #0E0F13;
--lx-surface: #16181D;
--lx-surface-2: #1D2027;
--lx-border: #292C33;
--lx-border-strong: #363A43;
--lx-text: #F4F5F7;
--lx-text-muted: #9BA1AC;
--lx-text-faint: #6B7280;
--lx-code-bg: #08090C;
--lx-code-text: #E7E9EE;
--lx-shadow-sm: 0 1px 2px rgba(0,0,0,.40);
--lx-shadow-md: 0 2px 12px rgba(0,0,0,.50);
--lx-shadow-lg: 0 16px 40px rgba(0,0,0,.60);
}