/* ══════════════════════════════════════════════════════════════════
midnight-editorial.css — deep navy, serif display, warm gold accents.
Cinematic, premium magazine feel. Dark-first.
Identity: editorial decks, narrative presentations, premium reports.
══════════════════════════════════════════════════════════════════ */
/* ── Fonts ──
Add to :
*/
/* ── Baseline Tokens — Midnight Dark ── */
:root,
[data-theme="dark"] {
color-scheme: light dark;
/* Surfaces */
--bg: #0f1729;
--surface: #162040;
--surface2: #1d2b52;
--surface-elevated: #243362;
--border: rgba(200, 180, 140, 0.08);
--border-bright: rgba(200, 180, 140, 0.16);
/* Text */
--text: #e8e4d8;
--text-dim: #9a9484;
--text-muted: #7a7468;
/* Accent — warm gold */
--accent: #d4a73a;
--accent-dim: rgba(212, 167, 58, 0.1);
--accent-glow: rgba(212, 167, 58, 0.25);
/* Code */
--code-bg: #0a0f1e;
--code-text: #d4d0c4;
}
/* ── Baseline Tokens — Midnight Light ── */
[data-theme="light"] {
--bg: #faf8f2;
--surface: #ffffff;
--surface2: #f5f0e6;
--surface-elevated: #fffdf5;
--border: rgba(30, 30, 50, 0.08);
--border-bright: rgba(30, 30, 50, 0.16);
--text: #1a1814;
--text-dim: #7a7468;
--text-muted: #9a9484;
--accent: #b8860b;
--accent-dim: rgba(184, 134, 11, 0.08);
--accent-glow: rgba(184, 134, 11, 0.2);
--code-bg: #2a2520;
--code-text: #e8e4d8;
}
/* ── Semantic Color Tokens — Midnight Dark ── */
:root,
[data-theme="dark"] {
--success: #4ade80;
--success-dim: rgba(74, 222, 128, 0.1);
--warning: #fbbf24;
--warning-dim: rgba(251, 191, 36, 0.1);
--error: #f87171;
--error-dim: rgba(248, 113, 113, 0.12);
--info: #22d3ee;
--info-dim: rgba(34, 211, 238, 0.12);
/* Extended palette */
--cyan: #22d3ee;
--cyan-dim: rgba(34, 211, 238, 0.12);
--green: #4ade80;
--green-dim: rgba(74, 222, 128, 0.1);
--amber: #fbbf24;
--amber-dim: rgba(251, 191, 36, 0.1);
--red: #f87171;
--red-dim: rgba(248, 113, 113, 0.12);
--purple: #c084fc;
--purple-dim: rgba(192, 132, 252, 0.1);
}
/* ── Semantic Color Tokens — Midnight Light ── */
[data-theme="light"] {
--success: #16a34a;
--success-dim: rgba(22, 163, 74, 0.1);
--warning: #d97706;
--warning-dim: rgba(217, 119, 6, 0.1);
--error: #dc2626;
--error-dim: rgba(220, 38, 38, 0.1);
--info: #0891b2;
--info-dim: rgba(8, 145, 178, 0.1);
--cyan: #0891b2;
--cyan-dim: rgba(8, 145, 178, 0.1);
--green: #16a34a;
--green-dim: rgba(22, 163, 74, 0.1);
--amber: #d97706;
--amber-dim: rgba(217, 119, 6, 0.1);
--red: #dc2626;
--red-dim: rgba(220, 38, 38, 0.1);
--purple: #7c3aed;
--purple-dim: rgba(124, 58, 237, 0.1);
}
/* ── Midnight Light — OS preference (unless manually dark) ── */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg: #faf8f2;
--surface: #ffffff;
--surface2: #f5f0e6;
--surface-elevated: #fffdf5;
--border: rgba(30, 30, 50, 0.08);
--border-bright: rgba(30, 30, 50, 0.16);
--text: #1a1814;
--text-dim: #7a7468;
--text-muted: #9a9484;
--accent: #b8860b;
--accent-dim: rgba(184, 134, 11, 0.08);
--accent-glow: rgba(184, 134, 11, 0.2);
--code-bg: #2a2520;
--code-text: #e8e4d8;
--success: #16a34a;
--success-dim: rgba(22, 163, 74, 0.1);
--warning: #d97706;
--warning-dim: rgba(217, 119, 6, 0.1);
--error: #dc2626;
--error-dim: rgba(220, 38, 38, 0.1);
--info: #0891b2;
--info-dim: rgba(8, 145, 178, 0.1);
--cyan: #0891b2;
--cyan-dim: rgba(8, 145, 178, 0.1);
--green: #16a34a;
--green-dim: rgba(22, 163, 74, 0.1);
--amber: #d97706;
--amber-dim: rgba(217, 119, 6, 0.1);
--red: #dc2626;
--red-dim: rgba(220, 38, 38, 0.1);
--purple: #7c3aed;
--purple-dim: rgba(124, 58, 237, 0.1);
}
}
/* ── Typography Overrides ── */
body {
font-family: 'Instrument Serif', Georgia, serif;
}
h1, h2, h3, h4 {
font-family: 'Instrument Serif', Georgia, serif;
}
code, pre, .mono {
font-family: 'JetBrains Mono', 'SF Mono', monospace;
}
/* ══════════════════════════════════════════════════════════════════
Slide mode — midnight-editorial aesthetic (used by forge-slides)
Cinematic serif display, radial gold glow, decorative corners.
══════════════════════════════════════════════════════════════════ */
.deck .slide--title {
background-image:
radial-gradient(ellipse at 50% 20%, var(--accent-glow) 0%, transparent 55%),
linear-gradient(to bottom, var(--bg), var(--surface));
}
.deck .slide--title .slide__display {
font-family: 'Instrument Serif', Georgia, serif;
font-weight: 400;
letter-spacing: -2px;
color: var(--text);
}
.deck .slide--title .slide__subtitle {
color: var(--text-dim);
border-top: 1px solid var(--border-bright);
padding-top: 1rem;
}
.deck .slide--content .slide__heading {
font-family: 'Instrument Serif', Georgia, serif;
color: var(--text);
letter-spacing: -1px;
}
.deck .slide--content .slide__label {
color: var(--accent);
}
.deck .slide--section .slide__number {
color: var(--accent);
opacity: 0.06;
}
.deck .slide--closing {
background-image:
radial-gradient(ellipse at 50% 70%, var(--accent-dim) 0%, transparent 60%),
linear-gradient(to top, var(--bg), var(--surface));
}
.deck .slide--closing .slide__heading {
font-family: 'Instrument Serif', Georgia, serif;
color: var(--accent);
}
.deck .slide--closing .cta {
box-shadow: 0 0 0 3px var(--accent-dim);
}