/* ---------- Design tokens: single source of truth, used via var(--token-name) ---------- */ :root { /* ---------- Spacing scale (base 16px) ---------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ /* ---------- Font sizes ---------- */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.8125rem; /* 13px */ --font-size-md: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ /* ---------- Line heights ---------- */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ---------- Font weights ---------- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* ---------- Border radius ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ---------- Border widths ---------- */ --border-width: 1px; --border-width-thick: 2px; /* ---------- Colors: brand ---------- */ --color-primary: #7f56d9; --color-primary-hover: #2c2358; --color-primary-border: #9372dc; --color-secondary: #2c2358; --color-accent: #e2dcf7; /* ---------- Colors: surfaces / backgrounds ---------- */ --color-bg: #0c081b; --color-surface: #1e173b; --color-surface-alt: #251d49; --color-border: #251d49; /* ---------- Colors: text ---------- */ --color-text: #e2dcf7; --color-text-muted: #8880a4; --color-text-on-primary: #ffffff; /* ---------- Colors: state ---------- */ --color-danger: #d93025; --color-success: #1e8e3e; --color-warning: #f9ab00; /* ---------- Shadows ---------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3); /* ---------- Transitions ---------- */ --transition-fast: 150ms ease; --transition-base: 300ms ease; /* ---------- Z-index scale ---------- */ --z-dropdown: 100; --z-modal: 1000; --z-tooltip: 1100; } /* ---------- Redesign theme tokens (dark default, .light on ); --color-* above is the legacy palette ---------- */ :root { --bg: #0f0e14; --panel: #16141d; --panel2: #1b1826; --border: #2a2638; --border2: #332e44; --text: #edebf5; --muted: #918ba6; --faint: #6b6580; --accent: #8b7cf7; --input: #121019; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.5); --radius: 14px; --on-accent: #ffffff; --success: #2fbf71; --danger: #e5484d; --overlay: rgba(10, 8, 20, 0.55); /* Derived from --accent at use time - no per-theme override needed. */ --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent); --accent-fade: color-mix(in oklab, var(--accent) 9%, transparent); --accent-hover: color-mix(in oklab, var(--accent) 88%, white); } :root.light { --bg: #f5f4fa; --panel: #ffffff; --panel2: #faf9fd; --border: #e6e3f0; --border2: #d8d4e8; --text: #232032; --muted: #716b88; --faint: #9c96b0; --accent: #6c58e8; --input: #ffffff; --shadow: 0 1px 2px rgba(35, 32, 50, 0.06), 0 8px 24px -14px rgba(35, 32, 50, 0.14); }