/** * Handfish Theme: Cyberpunk * * Electric cyan/magenta neon aesthetic with near-black backgrounds, * sharp corners, and glowing accents. Apply with: * * * * Or import after the base stylesheet to override defaults. */ [data-theme="cyberpunk"] { /* Neutrals — near-black, slight cyan tint (hue 195°) */ --hf-color-1: oklch(8.5% 0.012 195); --hf-color-2: oklch(13.2% 0.020 195); --hf-color-3: oklch(18.5% 0.025 195); --hf-color-4: oklch(25.0% 0.030 195); --hf-color-5: oklch(55.0% 0.040 195); --hf-color-6: oklch(75.0% 0.025 195); --hf-color-7: oklch(92.0% 0.010 195); /* Accents — electric cyan, high chroma */ --hf-accent-1: oklch(18.0% 0.060 195); --hf-accent-2: oklch(28.0% 0.090 195); --hf-accent-3: oklch(75.0% 0.170 195); --hf-accent-4: oklch(88.0% 0.120 195); /* Semantic colors — neon hot */ --hf-red: oklch(65.0% 0.270 10); --hf-green: oklch(82.0% 0.250 145); --hf-yellow: oklch(90.0% 0.180 95); --hf-blue: oklch(70.0% 0.200 250); /* Typography — monospace as primary for terminal feel */ --hf-font-family: 'Noto Sans Mono', 'SF Mono', Monaco, Consolas, monospace; /* Sharp corners */ --hf-radius-sm: 2px; --hf-radius-md: 3px; --hf-radius: 3px; --hf-radius-lg: 4px; --hf-radius-xl: 6px; --hf-radius-pill: 999px; /* Neon glow shadows — cyan-tinted */ --hf-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.4); --hf-shadow: 0 2px 6px oklch(0% 0 0 / 0.5); --hf-shadow-md: 0 4px 12px oklch(0% 0 0 / 0.5), 0 0 8px oklch(75% 0.170 195 / 0.15); --hf-shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.6), 0 0 16px oklch(75% 0.170 195 / 0.2); --hf-shadow-xl: 0 16px 48px oklch(0% 0 0 / 0.7), 0 0 32px oklch(75% 0.170 195 / 0.25); --hf-glow-accent: 0 0 20px oklch(75% 0.170 195 / 0.5); /* Glassmorphism — more transparent, stronger blur */ --hf-surface-opacity: 82%; --hf-surface-transparency: 18%; --hf-panel-opacity: 72%; --hf-panel-transparency: 28%; --hf-header-opacity: 50%; --hf-header-transparency: 50%; --hf-glass-blur: blur(28px); --hf-glass-blur-sm: blur(12px); --hf-glass-blur-lg: blur(40px); --hf-backdrop: oklch(0% 0 0 / 0.75); /* Computed borders — cyan glow tint */ --hf-border: color-mix(in srgb, var(--hf-accent-3) 30%, transparent 70%); --hf-border-hover: color-mix(in srgb, var(--hf-accent-3) 50%, transparent 50%); --hf-border-focus: var(--hf-accent-3); /* Slightly smaller base font to feel more dense/technical */ --hf-size-base: 0.8125rem; }