/* ============================================ THEME VARIABLES Two themes: Teal Terminal (original) & Deep Navy (modern) Toggle with data-theme attribute on ============================================ */ /* --- Teal Terminal Theme (Default) --- */ :root, [data-theme="teal"] { /* Backgrounds */ --bg-primary: #001a20; --bg-secondary: #002a33; --bg-surface: rgba(0, 50, 60, 0.6); --bg-surface-hover: rgba(0, 70, 85, 0.7); --bg-glass: rgba(0, 42, 51, 0.4); /* Accent colors */ --accent-primary: #7DE38D; --accent-primary-rgb: 125, 227, 141; --accent-secondary: #288f5b; --accent-glow: rgba(125, 227, 141, 0.15); --accent-glow-strong: rgba(125, 227, 141, 0.3); --accent-gradient: linear-gradient(135deg, #7DE38D, #4ecdc4); /* Text */ --text-primary: #e0f0e8; --text-secondary: #8fb8a0; --text-muted: #5a8a70; --text-on-accent: #001a20; /* Borders */ --border-subtle: rgba(125, 227, 141, 0.1); --border-medium: rgba(125, 227, 141, 0.2); --border-strong: rgba(125, 227, 141, 0.4); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px rgba(125, 227, 141, 0.1); } /* --- Deep Navy Theme --- */ [data-theme="navy"] { /* Backgrounds */ --bg-primary: #0a1628; --bg-secondary: #111d33; --bg-surface: rgba(17, 29, 51, 0.6); --bg-surface-hover: rgba(25, 40, 70, 0.7); --bg-glass: rgba(17, 29, 51, 0.4); /* Accent colors */ --accent-primary: #7DE38D; --accent-primary-rgb: 125, 227, 141; --accent-secondary: #3b82f6; --accent-glow: rgba(125, 227, 141, 0.12); --accent-glow-strong: rgba(125, 227, 141, 0.25); --accent-gradient: linear-gradient(135deg, #7DE38D, #3b82f6); /* Text */ --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --text-on-accent: #0a1628; /* Borders */ --border-subtle: rgba(148, 163, 184, 0.08); --border-medium: rgba(148, 163, 184, 0.15); --border-strong: rgba(125, 227, 141, 0.3); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.1); } /* --- Spacing Scale (8px base) --- */ :root { --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ /* Typography */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inconsolata', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3.5rem; /* Layout */ --max-width: 1200px; --header-height: 72px; --border-radius-sm: 8px; --border-radius-md: 12px; --border-radius-lg: 16px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; }