81 lines
2.3 KiB
CSS
81 lines
2.3 KiB
CSS
/* ============================================================
|
||
Star Trek LCARS × Modern Minimal — Design Tokens
|
||
============================================================ */
|
||
:root {
|
||
/* Core palette */
|
||
--bg: #080c14;
|
||
--bg-subtle: #0b1120;
|
||
--surface: #0f1623;
|
||
--surface-raised: #162032;
|
||
--surface-hover: #1c2d45;
|
||
--fg: #d4dce8;
|
||
--fg-bright: #f1f5f9;
|
||
--fg-dim: #94a3b8;
|
||
--muted: #5a6b82;
|
||
--border: #1c2a3f;
|
||
--border-light: #253550;
|
||
|
||
/* Accent — LCARS amber/gold */
|
||
--accent: #f0a030;
|
||
--accent-hover: #fbbf24;
|
||
--accent-dim: #b47818;
|
||
--accent-bg: rgba(240, 160, 48, 0.08);
|
||
--accent-border: rgba(240, 160, 48, 0.25);
|
||
|
||
/* Secondary accents */
|
||
--cyan: #22d3ee;
|
||
--cyan-dim: #0891b2;
|
||
--cyan-bg: rgba(34, 211, 238, 0.08);
|
||
--red: #ef4444;
|
||
--red-dim: #dc2626;
|
||
--red-bg: rgba(239, 68, 68, 0.08);
|
||
--green: #22c55e;
|
||
--green-dim: #16a34a;
|
||
--green-bg: rgba(34, 197, 94, 0.08);
|
||
--purple: #a78bfa;
|
||
--purple-dim: #8b5cf6;
|
||
--purple-bg: rgba(167, 139, 250, 0.08);
|
||
|
||
/* Typography */
|
||
--font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
||
--font-body: 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
||
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, monospace;
|
||
|
||
/* Spacing */
|
||
--sp-1: 4px;
|
||
--sp-2: 8px;
|
||
--sp-3: 12px;
|
||
--sp-4: 16px;
|
||
--sp-5: 20px;
|
||
--sp-6: 24px;
|
||
--sp-8: 32px;
|
||
--sp-10: 40px;
|
||
--sp-12: 48px;
|
||
--sp-16: 64px;
|
||
|
||
/* Radii — LCARS inspired (pill shapes) */
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-xl: 20px;
|
||
--radius-pill: 9999px;
|
||
|
||
/* Shadows */
|
||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
|
||
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
|
||
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
|
||
--shadow-glow-accent: 0 0 20px rgba(240, 160, 48, 0.15);
|
||
--shadow-glow-cyan: 0 0 20px rgba(34, 211, 238, 0.15);
|
||
|
||
/* Transitions */
|
||
--transition-fast: 150ms ease;
|
||
--transition-base: 250ms ease;
|
||
--transition-slow: 400ms ease;
|
||
|
||
/* Layout */
|
||
--sidebar-width: 260px;
|
||
--sidebar-collapsed: 60px;
|
||
--topbar-height: 48px;
|
||
--content-max-width: 1100px;
|
||
}
|