/* ========================================================================== asyrul.dev — Design tokens (theme-scoped) Sci-fi / HUD aesthetic. Dark is the default; [data-theme="light"] overrides. Theme is set on via data-theme, bootstrapped inline in (stored preference wins, else system prefers-color-scheme). ========================================================================== */ :root { color-scheme: dark; /* Surfaces (deep space) */ --ay-space-950: #04050c; --ay-space-900: #070a16; --ay-space-850: #0a0e1f; --ay-space-800: #0e1428; --ay-space-700: #16203c; --ay-space-600: #23304f; /* Signal (primary accent — cyan) */ --ay-signal: #4ee1e8; --ay-signal-strong: #22d3ee; --ay-signal-dim: rgba(78, 225, 232, 0.35); --ay-signal-faint: rgba(78, 225, 232, 0.08); /* Plasma (secondary accent — violet) */ --ay-plasma: #8b7bff; --ay-plasma-strong: #7c5cff; --ay-plasma-faint: rgba(139, 123, 255, 0.1); /* Flare (tertiary accent — amber, for warnings/highlights) */ --ay-flare: #f5b649; /* Text */ --ay-text-bright: #eef2ff; --ay-text: #b8c2dd; --ay-text-dim: #7a86a8; /* Text/icons sitting ON an accent gradient (buttons) */ --ay-on-accent: #04050c; /* Lines & glass */ --ay-line: rgba(120, 140, 190, 0.18); --ay-line-bright: rgba(78, 225, 232, 0.4); --ay-glass: rgba(14, 20, 40, 0.62); --ay-glass-heavy: rgba(10, 14, 31, 0.88); /* Hero HUD grid overlay */ --ay-hero-grid: rgba(78, 225, 232, 0.03); /* Error states (chat) */ --ay-error-border: rgba(240, 82, 82, 0.5); --ay-error-bg: rgba(240, 82, 82, 0.08); --ay-error-text: #f8b4b4; /* Gradients */ --ay-gradient-signal: linear-gradient(135deg, #4ee1e8 0%, #7c5cff 100%); --ay-gradient-text: linear-gradient(100deg, #eef2ff 10%, #4ee1e8 55%, #8b7bff 90%); /* Typography */ --ay-font-display: "Chakra Petch", "Segoe UI", sans-serif; --ay-font-body: "Inter", "Segoe UI", sans-serif; --ay-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Layout */ --ay-section-max: 1160px; --ay-section-pad: clamp(20px, 5vw, 64px); /* Radii */ --ay-radius-sm: 8px; --ay-radius: 12px; --ay-radius-lg: 18px; --ay-radius-pill: 999px; /* Shadows / glows */ --ay-glow-signal: 0 0 24px rgba(78, 225, 232, 0.28), 0 0 64px rgba(78, 225, 232, 0.1); --ay-glow-plasma: 0 0 24px rgba(124, 92, 255, 0.3); --ay-shadow-deep: 0 24px 60px -20px rgba(0, 0, 0, 0.75); /* Motion */ --ay-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* -------------------------------------------------------------------------- Light theme — "day ops" mode -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --ay-space-950: #f2f5fb; --ay-space-900: #e9edf7; --ay-space-850: #ffffff; --ay-space-800: #e2e8f4; --ay-space-700: #cdd7e9; --ay-space-600: #a8b6d2; --ay-signal: #0d94a6; --ay-signal-strong: #087e92; --ay-signal-dim: rgba(13, 148, 166, 0.4); --ay-signal-faint: rgba(13, 148, 166, 0.08); --ay-plasma: #6d5bd0; --ay-plasma-strong: #5b3fd6; --ay-plasma-faint: rgba(109, 91, 208, 0.1); --ay-flare: #b97708; --ay-text-bright: #101830; --ay-text: #35415f; --ay-text-dim: #67739a; --ay-on-accent: #ffffff; --ay-line: rgba(30, 45, 90, 0.15); --ay-line-bright: rgba(13, 148, 166, 0.45); --ay-glass: rgba(255, 255, 255, 0.68); --ay-glass-heavy: rgba(248, 250, 255, 0.9); --ay-hero-grid: rgba(16, 24, 48, 0.05); --ay-error-border: rgba(200, 30, 30, 0.4); --ay-error-bg: rgba(220, 38, 38, 0.06); --ay-error-text: #b91c1c; --ay-gradient-signal: linear-gradient(135deg, #0d94a6 0%, #6d5bd0 100%); --ay-gradient-text: linear-gradient(100deg, #101830 10%, #0d94a6 55%, #6d5bd0 90%); --ay-glow-signal: 0 0 24px rgba(13, 148, 166, 0.2), 0 0 64px rgba(13, 148, 166, 0.08); --ay-glow-plasma: 0 0 24px rgba(109, 91, 208, 0.22); --ay-shadow-deep: 0 24px 60px -24px rgba(30, 45, 90, 0.28); }