/* ==========================================================================
THEMES — shared palette layer
==========================================================================
Extracted from style.css so stand-alone pages can adopt all eight themes
without inheriting the whole site's component styles.
Load this BEFORE style.css:
theme-core.js keeps and in sync. Anything
depending on light/dark polarity must key off data-mode, never off a single
theme name — every family has both a light and a dark variant.
========================================================================== */
/* ==========================================================================
DESIGN TOKENS & THEMING
========================================================================== */
:root {
/* Fonts */
--font-primary: 'Inter', sans-serif;
--font-heading: 'Plus Jakarta Sans', sans-serif;
--font-code: 'Fira Code', monospace;
/* Transitions */
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Shadow Styles */
--shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 12px 20px -8px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
--shadow-glow: 0 0 25px rgba(124, 58, 237, 0.15);
/* Spacing */
--section-padding: 8rem 2rem;
--container-max-width: 1200px;
--border-radius-sm: 8px;
--border-radius-md: 16px;
--border-radius-lg: 24px;
/* Structural knobs that themes below can override */
--border-width: 1px;
--surface-blur: 16px;
}
/* --- Dark Theme Variables (Default) --- */
[data-theme="dark"] {
--bg-primary: hsl(240, 10%, 4%);
--bg-secondary: hsl(240, 10%, 8%);
--bg-tertiary: hsl(240, 10%, 12%);
--bg-glass: rgba(10, 10, 15, 0.4);
--text-primary: hsl(0, 0%, 100%);
--text-secondary: hsl(240, 5%, 75%);
--text-muted: hsl(240, 5%, 50%);
--border-color: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.2);
--accent-primary: hsl(270, 100%, 60%); /* Deep Neon Purple */
--accent-secondary: hsl(330, 100%, 60%); /* Hot Pink */
--accent-hover: hsl(270, 100%, 70%);
--glow-color-1: rgba(138, 43, 226, 0.25);
--glow-color-2: rgba(255, 20, 147, 0.15);
--card-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8);
--code-keyword: hsl(300, 100%, 75%);
--code-string: hsl(115, 80%, 75%);
--font-heading: 'Plus Jakarta Sans', sans-serif;
--font-code: 'Fira Code', monospace;
--border-radius-sm: 8px;
--border-radius-md: 16px;
--border-radius-lg: 24px;
--border-width: 1px;
--surface-blur: 16px;
}
/* --- Light Theme Variables --- */
[data-theme="light"] {
--bg-primary: hsl(220, 10%, 93%);
--bg-secondary: hsl(0, 0%, 100%);
--bg-tertiary: hsl(220, 10%, 89%);
--bg-glass: rgba(240, 240, 245, 0.75);
--text-primary: hsl(240, 10%, 10%);
--text-secondary: hsl(240, 5%, 35%);
--text-muted: hsl(240, 5%, 55%);
--border-color: rgba(0, 0, 0, 0.08);
--border-hover: rgba(0, 0, 0, 0.15);
--accent-primary: hsl(270, 80%, 55%);
--accent-secondary: hsl(330, 80%, 55%);
--accent-hover: hsl(270, 80%, 45%);
--glow-color-1: rgba(138, 43, 226, 0.06);
--glow-color-2: rgba(255, 20, 147, 0.03);
--card-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 4px 16px -2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
--shadow-md: 0 16px 36px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.14), 0 6px 16px rgba(0, 0, 0, 0.06);
--code-keyword: hsl(290, 80%, 45%);
--code-string: hsl(135, 60%, 35%);
--font-heading: 'Plus Jakarta Sans', sans-serif;
--font-code: 'Fira Code', monospace;
--border-radius-sm: 8px;
--border-radius-md: 16px;
--border-radius-lg: 24px;
--border-width: 1px;
--surface-blur: 16px;
}
/* --- "Ink & Amber" Theme Variables ---
Warm editorial theme: type via terminal command `theme amber`. */
[data-theme="amber"] {
--bg-primary: hsl(30, 14%, 6%);
--bg-secondary: hsl(28, 13%, 10%);
--bg-tertiary: hsl(27, 11%, 14%);
--bg-glass: rgba(22, 17, 12, 0.5);
--text-primary: hsl(40, 32%, 96%);
--text-secondary: hsl(35, 12%, 72%);
--text-muted: hsl(35, 8%, 48%);
--border-color: rgba(250, 235, 210, 0.09);
--border-hover: rgba(250, 235, 210, 0.22);
--accent-primary: hsl(38, 92%, 55%); /* Warm Amber Gold */
--accent-secondary: hsl(14, 78%, 54%); /* Burnt Terracotta */
--accent-hover: hsl(38, 92%, 66%);
--glow-color-1: rgba(245, 166, 35, 0.2);
--glow-color-2: rgba(214, 89, 46, 0.14);
--card-shadow: 0 20px 40px -10px rgba(10, 6, 2, 0.7);
--shadow-sm: 2px 2px 8px -2px rgba(10, 6, 2, 0.2);
--shadow-md: 0 12px 20px -8px rgba(10, 6, 2, 0.3);
--shadow-lg: 0 20px 40px -12px rgba(10, 6, 2, 0.4);
--shadow-glow: 0 0 25px rgba(245, 166, 35, 0.2);
--code-keyword: hsl(38, 92%, 68%);
--code-string: hsl(150, 40%, 60%);
--font-heading: 'Fraunces', serif;
--font-code: 'JetBrains Mono', monospace;
--border-radius-sm: 3px;
--border-radius-md: 8px;
--border-radius-lg: 14px;
--border-width: 1px;
--surface-blur: 16px;
}
/* --- "Structured Mono" Theme Variables ---
Flat neo-brutalist theme: type via terminal command `theme mono`. */
[data-theme="mono"] {
--bg-primary: hsl(0, 0%, 7%);
--bg-secondary: hsl(0, 0%, 11%);
--bg-tertiary: hsl(0, 0%, 15%);
--bg-glass: rgba(17, 17, 17, 0.97);
--text-primary: hsl(0, 0%, 98%);
--text-secondary: hsl(0, 0%, 72%);
--text-muted: hsl(0, 0%, 48%);
--border-color: rgba(255, 255, 255, 0.3);
--border-hover: rgba(255, 255, 255, 0.75);
--accent-primary: hsl(221, 83%, 58%); /* Electric Blue */
--accent-secondary: hsl(199, 89%, 52%); /* Cyan-Blue */
--accent-hover: hsl(221, 83%, 68%);
--glow-color-1: rgba(37, 99, 235, 0.05);
--glow-color-2: rgba(14, 165, 233, 0.03);
--card-shadow: 6px 6px 0 0 rgba(255, 255, 255, 0.85);
--shadow-sm: 2px 2px 0 0 rgba(255, 255, 255, 0.85);
--shadow-md: 4px 4px 0 0 rgba(255, 255, 255, 0.85);
--shadow-lg: 8px 8px 0 0 rgba(255, 255, 255, 0.85);
--shadow-glow: 5px 5px 0 0 hsl(221, 83%, 58%);
--code-keyword: hsl(221, 83%, 68%);
--code-string: hsl(150, 55%, 55%);
--font-heading: 'Space Grotesk', sans-serif;
--font-code: 'Space Mono', monospace;
--border-radius-sm: 0px;
--border-radius-md: 0px;
--border-radius-lg: 0px;
--border-width: 2px;
--surface-blur: 0px;
}
/* --- "Hacker Green" Theme Variables ---
Classic phosphor-green-on-black CRT/terminal palette: type via the
terminal command `theme green`. */
[data-theme="green"] {
--bg-primary: hsl(120, 20%, 3%);
--bg-secondary: hsl(120, 18%, 6%);
--bg-tertiary: hsl(120, 16%, 9%);
--bg-glass: rgba(0, 12, 4, 0.55);
--text-primary: hsl(120, 100%, 85%);
--text-secondary: hsl(120, 55%, 62%);
--text-muted: hsl(120, 30%, 38%);
--border-color: rgba(51, 255, 102, 0.16);
--border-hover: rgba(51, 255, 102, 0.45);
--accent-primary: hsl(120, 100%, 50%); /* Classic Matrix Green */
--accent-secondary: hsl(150, 100%, 42%); /* Teal-Green */
--accent-hover: hsl(120, 100%, 62%);
--glow-color-1: rgba(0, 255, 65, 0.22);
--glow-color-2: rgba(0, 200, 90, 0.12);
--card-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.85);
--shadow-sm: 0 2px 8px -2px rgba(0, 255, 65, 0.15);
--shadow-md: 0 12px 20px -8px rgba(0, 255, 65, 0.18);
--shadow-lg: 0 20px 40px -12px rgba(0, 255, 65, 0.22);
--shadow-glow: 0 0 25px rgba(0, 255, 65, 0.35);
--code-keyword: hsl(120, 100%, 62%);
--code-string: hsl(150, 90%, 55%);
--font-heading: 'Share Tech Mono', monospace;
--font-code: 'Share Tech Mono', monospace;
--border-radius-sm: 2px;
--border-radius-md: 6px;
--border-radius-lg: 12px;
--border-width: 1px;
--surface-blur: 12px;
}
/* ==========================================================================
LIGHT COUNTERPARTS
==========================================================================
Every theme is a FAMILY with two modes, so the sun/moon toggle flips
polarity without throwing away the palette the visitor chose:
default dark <-> light
amber amber <-> amber-light
mono mono <-> mono-light
green green <-> green-light
Each light variant keeps its family's identity — the serif/small-radius
editorial feel of amber, the flat 2px-border zero-radius brutalism of mono,
the monospaced phosphor look of green — and only inverts the ground.
Accents are darkened relative to their dark-mode values, because a hue that
glows correctly on near-black is unreadable on near-white.
========================================================================== */
/* --- "Ink & Amber", light: warm paper and ink instead of ink and amber --- */
[data-theme="amber-light"] {
--bg-primary: hsl(38, 44%, 94%);
--bg-secondary: hsl(40, 56%, 98%);
--bg-tertiary: hsl(36, 30%, 89%);
--bg-glass: rgba(252, 246, 235, 0.78);
--text-primary: hsl(28, 32%, 11%);
--text-secondary: hsl(30, 20%, 30%);
--text-muted: hsl(32, 14%, 45%);
--border-color: rgba(72, 48, 22, 0.16);
--border-hover: rgba(72, 48, 22, 0.34);
--accent-primary: hsl(31, 90%, 38%); /* Burnished amber, readable on paper */
--accent-secondary: hsl(12, 72%, 43%); /* Burnt Terracotta */
--accent-hover: hsl(31, 90%, 30%);
--glow-color-1: rgba(180, 110, 20, 0.10);
--glow-color-2: rgba(190, 80, 40, 0.06);
--card-shadow: 0 18px 36px -12px rgba(80, 52, 20, 0.20), 0 3px 10px -2px rgba(80, 52, 20, 0.08);
--shadow-sm: 2px 2px 8px -2px rgba(80, 52, 20, 0.14);
--shadow-md: 0 12px 20px -8px rgba(80, 52, 20, 0.18);
--shadow-lg: 0 20px 40px -12px rgba(80, 52, 20, 0.22);
--shadow-glow: 0 0 25px rgba(180, 110, 20, 0.18);
--code-keyword: hsl(28, 88%, 34%);
--code-string: hsl(150, 48%, 27%);
--font-heading: 'Fraunces', serif;
--font-code: 'JetBrains Mono', monospace;
--border-radius-sm: 3px;
--border-radius-md: 8px;
--border-radius-lg: 14px;
--border-width: 1px;
--surface-blur: 16px;
}
/* --- "Structured Mono", light: the classic neo-brutalist inversion ---
Hard black borders and solid offset shadows, no blur, no rounding. */
[data-theme="mono-light"] {
--bg-primary: hsl(0, 0%, 96%);
--bg-secondary: hsl(0, 0%, 100%);
--bg-tertiary: hsl(0, 0%, 90%);
--bg-glass: rgba(255, 255, 255, 0.97);
--text-primary: hsl(0, 0%, 6%);
--text-secondary: hsl(0, 0%, 25%);
--text-muted: hsl(0, 0%, 44%);
--border-color: rgba(0, 0, 0, 0.32);
--border-hover: rgba(0, 0, 0, 0.78);
--accent-primary: hsl(221, 83%, 46%); /* Electric Blue, darkened for paper */
--accent-secondary: hsl(199, 90%, 36%);
--accent-hover: hsl(221, 83%, 36%);
--glow-color-1: rgba(37, 99, 235, 0.05);
--glow-color-2: rgba(14, 165, 233, 0.03);
--card-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.88);
--shadow-sm: 2px 2px 0 0 rgba(0, 0, 0, 0.88);
--shadow-md: 4px 4px 0 0 rgba(0, 0, 0, 0.88);
--shadow-lg: 8px 8px 0 0 rgba(0, 0, 0, 0.88);
--shadow-glow: 5px 5px 0 0 hsl(221, 83%, 46%);
--code-keyword: hsl(221, 83%, 40%);
--code-string: hsl(150, 60%, 26%);
--font-heading: 'Space Grotesk', sans-serif;
--font-code: 'Space Mono', monospace;
--border-radius-sm: 0px;
--border-radius-md: 0px;
--border-radius-lg: 0px;
--border-width: 2px;
--surface-blur: 0px;
}
/* --- "Hacker Green", light: reverse-video phosphor, dark green on pale mint --- */
[data-theme="green-light"] {
--bg-primary: hsl(120, 30%, 94%);
--bg-secondary: hsl(120, 44%, 98%);
--bg-tertiary: hsl(120, 22%, 88%);
--bg-glass: rgba(240, 252, 243, 0.75);
--text-primary: hsl(140, 62%, 10%);
--text-secondary: hsl(140, 36%, 24%);
--text-muted: hsl(140, 20%, 40%);
--border-color: rgba(0, 92, 34, 0.20);
--border-hover: rgba(0, 92, 34, 0.46);
--accent-primary: hsl(140, 92%, 24%); /* Deep phosphor, legible on mint */
--accent-secondary: hsl(162, 88%, 22%);
--accent-hover: hsl(140, 92%, 18%);
--glow-color-1: rgba(0, 140, 45, 0.10);
--glow-color-2: rgba(0, 120, 60, 0.06);
--card-shadow: 0 18px 36px -12px rgba(0, 60, 22, 0.20), 0 3px 10px -2px rgba(0, 60, 22, 0.08);
--shadow-sm: 0 2px 8px -2px rgba(0, 60, 22, 0.14);
--shadow-md: 0 12px 20px -8px rgba(0, 60, 22, 0.18);
--shadow-lg: 0 20px 40px -12px rgba(0, 60, 22, 0.22);
--shadow-glow: 0 0 25px rgba(0, 140, 45, 0.20);
--code-keyword: hsl(140, 90%, 22%);
--code-string: hsl(170, 76%, 22%);
--font-heading: 'Share Tech Mono', monospace;
--font-code: 'Share Tech Mono', monospace;
--border-radius-sm: 2px;
--border-radius-md: 6px;
--border-radius-lg: 12px;
--border-width: 1px;
--surface-blur: 12px;
}
/* ==========================================================================
THEME CROSSFADE
==========================================================================
theme-core.js adds .theme-transition to for the length of a palette
swap, then removes it — so the change reads as a fade instead of a hard cut
without leaving a transition on every element for the life of the page. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition: background-color 0.55s ease,
background-image 0.55s ease,
color 0.55s ease,
border-color 0.55s ease,
fill 0.55s ease,
stroke 0.55s ease,
box-shadow 0.55s ease !important;
}
@media (prefers-reduced-motion: reduce) {
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition: none !important;
}
}