/* === THE KID REPORTER — K-Pop Demon Hunter Design Tokens === */ /* Always dark. Void black base. Electric neon. Concert poster energy. */ :root, [data-theme='dark'] { /* === TYPOGRAPHY === */ --font-display: 'Bebas Neue', 'UnifrakturMaguntia', sans-serif; --font-serif: 'Playfair Display', 'Georgia', serif; --font-sans: 'Plus Jakarta Sans', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Fluid type scale */ --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem); --text-sm: clamp(0.8rem, 0.75rem + 0.35vw, 0.95rem); --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem); --text-lg: clamp(1.1rem, 1rem + 0.75vw, 1.4rem); --text-xl: clamp(1.3rem, 1.1rem + 1.25vw, 2rem); --text-2xl: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem); --text-3xl: clamp(2.2rem, 1rem + 4vw, 4.5rem); --text-hero: clamp(2.8rem, 0.5rem + 7vw, 7rem); /* === SPACING === */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* === VOID BLACK PALETTE (K-Pop Stage) === */ --color-void: #06040a; /* absolute void black-purple */ --color-void-soft: #0d0a14; /* slightly lifted — card bg */ --color-void-mid: #120f1c; /* raised panel */ --color-void-high: #1a1528; /* elevated surface — nav/footer */ --color-void-border: #2a2040; /* subtle border */ /* Legacy aliases (keep ticker/glows working) */ --color-ink: var(--color-void); --color-ink-soft: var(--color-void-soft); --color-ink-mid: var(--color-void-mid); --color-ink-raised: var(--color-void-high); --color-ink-border: var(--color-void-border); /* === SEMANTIC SURFACES === */ --bg-page: var(--color-void); --bg-surface: var(--color-void-soft); --bg-raised: var(--color-void-mid); --color-surface: var(--color-void-soft); --color-surface-2: var(--color-void-mid); --color-surface-offset: var(--color-void-high); --color-border: var(--color-void-border); --color-divider: var(--color-void-border); /* === TEXT === */ --color-text: #f0eaff; /* near-white lavender — readable on void */ --color-text-dim: #c0aee0; /* muted lavender */ --color-text-muted: #7a6a9c; /* dim accent */ --color-text-inverse: #06040a; /* Legacy parchment aliases */ --color-parchment: var(--color-text); --color-parchment-dim: var(--color-text-dim); --color-parchment-muted: var(--color-text-muted); /* === K-POP NEON PALETTE === */ --neon-pink: #ff2d78; /* hot K-pop pink — PRIMARY brand */ --neon-cyan: #00f0ff; /* electric cyan — secondary */ --neon-lime: #aaff00; /* acid lime — tertiary */ --neon-gold: #ffd600; /* gold — donate/blockquote */ --neon-violet: #bf5fff; /* violet/purple — tags */ --neon-magenta: #ff2d78; /* alias for pink */ /* Glow shadows */ --glow-pink: 0 0 8px #ff2d78, 0 0 24px rgba(255,45,120,0.5); --glow-cyan: 0 0 8px #00f0ff, 0 0 24px rgba(0,240,255,0.45); --glow-lime: 0 0 8px #aaff00, 0 0 20px rgba(170,255,0,0.4); --glow-gold: 0 0 8px #ffd600, 0 0 20px rgba(255,214,0,0.4); --glow-violet: 0 0 8px #bf5fff, 0 0 20px rgba(191,95,255,0.4); --glow-magenta: var(--glow-pink); /* === SEMANTIC COLORS === */ --color-primary: var(--neon-pink); --color-primary-hover: #ff5ca0; --color-accent: var(--neon-cyan); --color-accent-hover: #33f5ff; --color-accent-text: #06040a; --color-success: var(--neon-lime); --color-success-hover: #ccff44; /* === RADIUS & SHADOW === */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.7); --shadow-md: 0 4px 16px rgba(0,0,0,0.8); --shadow-lg: 0 8px 32px rgba(0,0,0,0.9); --shadow-xl: 0 16px 56px rgba(0,0,0,0.95); /* Card glow on hover */ --shadow-card-hover-pink: 0 0 0 1px #ff2d78, 0 8px 32px rgba(255,45,120,0.35); --shadow-card-hover-cyan: 0 0 0 1px #00f0ff, 0 8px 32px rgba(0,240,255,0.35); --shadow-card-hover-lime: 0 0 0 1px #aaff00, 0 8px 32px rgba(170,255,0,0.3); --shadow-card-hover-gold: 0 0 0 1px #ffd600, 0 8px 32px rgba(255,214,0,0.3); /* === LAYOUT === */ --max-w-content: 1200px; --max-w-article: 720px; --col-gap: clamp(1rem, 2vw, 2rem); /* === TRANSITIONS === */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --transition-interactive: 200ms cubic-bezier(0.22, 1, 0.36, 1); } /* ================================================================ LIGHT MODE — preserve the dark-text fix from previous session. Background goes slightly lighter but text stays DARK + readable. We intentionally keep a dark-ish surface (deep indigo) rather than cream so the neon still works. Text is near-black. ================================================================ */ [data-theme='light'] { --bg-page: #0d0a14; /* still dark — neon doesn't work on cream */ --bg-surface: #120f1c; --bg-raised: #1a1528; --color-surface: #120f1c; --color-surface-2: #1a1528; --color-surface-offset: #211840; --color-border: #2a2040; --color-divider: #2a2040; --color-void: #06040a; --color-ink: #06040a; --color-ink-soft: #0d0a14; --color-ink-border: #2a2040; /* Text stays light (bright) so it reads on dark bg */ --color-text: #f0eaff; --color-text-dim: #c0aee0; --color-text-muted: #7a6a9c; --color-parchment: #f0eaff; --color-parchment-dim: #c0aee0; /* Neons stay electric in light mode too */ --neon-pink: #ff2d78; --neon-cyan: #00f0ff; --neon-lime: #aaff00; --neon-gold: #ffd600; --neon-violet: #bf5fff; --neon-magenta: #ff2d78; --glow-pink: 0 0 6px rgba(255,45,120,0.6); --glow-cyan: 0 0 6px rgba(0,240,255,0.6); --glow-lime: 0 0 6px rgba(170,255,0,0.5); --glow-gold: 0 0 6px rgba(255,214,0,0.5); --glow-magenta: 0 0 6px rgba(255,45,120,0.6); }