/* ══════════════════════════════════════════════════════════════════
editorial.css — warm technical document aesthetic (S6)
Inspired by nats-arch-roadmap.html. Overrides base tokens.
Fonts (add to ):
Identity: rich roadmap / guide / architecture document
══════════════════════════════════════════════════════════════════ */
/* ── Baseline Tokens — Editorial Dark ── */
:root, [data-theme="dark"] {
color-scheme: light dark;
--bg: #0d1117;
--surface: #13191f;
--surface2: #1a2028;
--border: #21262d;
--border-bright: #2d333b;
--text: #fafafa;
--text-muted: #6b7280;
--text-dim: #9ca3af;
--accent: #fbbf24;
--accent-dim: rgba(251,191,36,0.15);
--accent-glow: rgba(251,191,36,0.2);
}
/* ── Baseline Tokens — Editorial Light ── */
[data-theme="light"] {
--bg: #f4f6f9;
--surface: #ffffff;
--surface2: #f0f2f5;
--border: #d1d5db;
--border-bright: #9ca3af;
--text: #111827;
--text-muted: #6b7280;
--text-dim: #374151;
--accent: #d97706;
--accent-dim: rgba(217,119,6,0.12);
--accent-glow: rgba(217,119,6,0.15);
}
/* ── Semantic Color Tokens — Editorial Dark ── */
:root, [data-theme="dark"] {
--success: #4ade80;
--success-dim: rgba(74,222,128,0.10);
--warning: #fbbf24;
--warning-dim: rgba(251,191,36,0.10);
--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.10);
--amber: #fbbf24;
--amber-dim: rgba(251,191,36,0.10);
--red: #f87171;
--red-dim: rgba(248,113,113,0.12);
--purple: #c084fc;
--purple-dim: rgba(192,132,252,0.10);
}
/* ── Semantic Color Tokens — Editorial Light ── */
[data-theme="light"] {
--success: #16a34a;
--success-dim: rgba(22,163,74,0.10);
--warning: #d97706;
--warning-dim: rgba(217,119,6,0.10);
--error: #dc2626;
--error-dim: rgba(220,38,38,0.10);
--info: #0891b2;
--info-dim: rgba(8,145,178,0.10);
/* Extended palette */
--cyan: #0891b2;
--cyan-dim: rgba(8,145,178,0.10);
--green: #16a34a;
--green-dim: rgba(22,163,74,0.10);
--amber: #d97706;
--amber-dim: rgba(217,119,6,0.10);
--red: #dc2626;
--red-dim: rgba(220,38,38,0.10);
--purple: #7c3aed;
--purple-dim: rgba(124,58,237,0.10);
}
/* ── Editorial Light — OS preference (unless manually dark) ── */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg: #f4f6f9;
--surface: #ffffff;
--surface2: #f0f2f5;
--border: #d1d5db;
--border-bright: #9ca3af;
--text: #111827;
--text-muted: #6b7280;
--text-dim: #374151;
--accent: #d97706;
--accent-dim: rgba(217,119,6,0.12);
--accent-glow: rgba(217,119,6,0.15);
--success: #16a34a;
--success-dim: rgba(22,163,74,0.10);
--warning: #d97706;
--warning-dim: rgba(217,119,6,0.10);
--error: #dc2626;
--error-dim: rgba(220,38,38,0.10);
--info: #0891b2;
--info-dim: rgba(8,145,178,0.10);
--cyan: #0891b2;
--cyan-dim: rgba(8,145,178,0.10);
--green: #16a34a;
--green-dim: rgba(22,163,74,0.10);
--amber: #d97706;
--amber-dim: rgba(217,119,6,0.10);
--red: #dc2626;
--red-dim: rgba(220,38,38,0.10);
--purple: #7c3aed;
--purple-dim: rgba(124,58,237,0.10);
}
}
/* ── Typography Overrides ── */
body {
font-family: 'Inter', system-ui, sans-serif;
}
h1, h2, h3, h4 {
font-family: 'Outfit', sans-serif;
}
code, pre, .mono {
font-family: 'Space Mono', monospace;
}
/* ── Header Pattern ── */
.header-eyebrow {
font-family: 'Space Mono', monospace;
font-size: 0.68rem;
color: var(--amber);
letter-spacing: 0.15em;
text-transform: uppercase;
}
header h1, .guide-title {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: clamp(1.3rem, 4vw, 1.9rem);
color: var(--text);
line-height: 1.15;
}
header h1 .accent { color: var(--amber); }
.header-subtitle {
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
color: var(--text-muted);
}
/* ── Section Divider ── */
.section-title {
font-family: 'Outfit', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.section-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, var(--border-bright), transparent);
}
/* ── Card Color Borders ── */
.card.high { border-left: 3px solid var(--red); }
.card.medium { border-left: 3px solid var(--amber); }
.card.low { border-left: 3px solid var(--green); }
.card.info { border-left: 3px solid var(--cyan); }
.card.tech { border-left: 3px solid var(--purple); }
/* ── Badge / Pill Colors ── */
.badge.green, .pill.green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(74,222,128,0.35); }
.badge.amber, .pill.amber { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(251,191,36,0.35); }
.badge.cyan, .pill.cyan { background: var(--cyan-dim); color: var(--cyan); border: 1px solid rgba(34,211,238,0.35); }
.badge.red, .pill.red { background: var(--red-dim); color: var(--red); border: 1px solid rgba(248,113,113,0.35); }
.badge.purple, .pill.purple { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(192,132,252,0.35); }
/* ── ASCII Diagram Colors ── */
pre .c-green { color: var(--green); }
pre .c-amber { color: var(--amber); }
pre .c-cyan { color: var(--cyan); }
pre .c-purple { color: var(--purple); }
pre .c-red { color: var(--red); }
pre .c-dim { color: var(--text-muted); }
pre .c-bright { color: var(--text); }
/* ══════════════════════════════════════════════════════════════════
Slide mode — editorial aesthetic (used by forge-slides)
Activated by .deck wrapping any .slide.slide--{type}.
══════════════════════════════════════════════════════════════════ */
/* Warm-editorial title slide: centered gold display, soft gold halo */
.deck .slide--title {
background-image:
radial-gradient(ellipse at 50% 30%, var(--accent-glow) 0%, transparent 55%),
linear-gradient(to bottom, var(--bg), var(--surface));
}
.deck .slide--title .slide__display {
font-weight: 700;
letter-spacing: -3px;
background: linear-gradient(180deg, var(--accent), var(--text));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.deck .slide--title .slide__subtitle {
color: var(--text-dim);
border-top: 1px solid var(--border-bright);
padding-top: 1rem;
}
/* Content slide: left-aligned heading, semi-serif feel via letter-spacing */
.deck .slide--content .slide__heading {
color: var(--text);
letter-spacing: -1px;
}
.deck .slide--content .slide__label {
color: var(--accent);
}
/* Closing slide: warm gold wash with bordered CTA */
.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 {
color: var(--accent);
font-weight: 600;
}
.deck .slide--closing .cta {
box-shadow: 0 0 0 3px var(--accent-dim);
}
.deck .slide--section .slide__number {
color: var(--accent);
opacity: 0.06;
}