/* ══════════════════════════════════════════════════════════════════
warm-signal.css — cream paper, bold sans, terracotta accents.
Confident and modern narrative tone. Light-first.
Identity: warm editorial decks, product storytelling, team updates.
══════════════════════════════════════════════════════════════════ */
/* ── Fonts ──
Add to :
*/
/* ── Baseline Tokens — Warm Signal Light ── */
:root,
[data-theme="light"] {
color-scheme: light dark;
/* Surfaces */
--bg: #faf6f0;
--surface: #ffffff;
--surface2: #f5ece0;
--surface-elevated: #fffdf5;
--border: rgba(60, 40, 20, 0.08);
--border-bright: rgba(60, 40, 20, 0.16);
/* Text */
--text: #2c2a25;
--text-dim: #7c756a;
--text-muted: #a09888;
/* Accent — terracotta */
--accent: #c2410c;
--accent-dim: rgba(194, 65, 12, 0.08);
--accent-glow: rgba(194, 65, 12, 0.2);
/* Code */
--code-bg: #2c2520;
--code-text: #f5ece0;
}
/* ── Baseline Tokens — Warm Signal Dark ── */
[data-theme="dark"] {
--bg: #1c1916;
--surface: #262220;
--surface2: #302b28;
--surface-elevated: #3a3430;
--border: rgba(200, 180, 160, 0.08);
--border-bright: rgba(200, 180, 160, 0.16);
--text: #f0e8dc;
--text-dim: #a09888;
--text-muted: #7c756a;
--accent: #e85d2a;
--accent-dim: rgba(232, 93, 42, 0.1);
--accent-glow: rgba(232, 93, 42, 0.25);
--code-bg: #141210;
--code-text: #f0e8dc;
}
/* ── Semantic Color Tokens — Warm Signal Light ── */
:root,
[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: #0ea5e9;
--info-dim: rgba(14, 165, 233, 0.1);
/* Extended palette */
--cyan: #0ea5e9;
--cyan-dim: rgba(14, 165, 233, 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);
}
/* ── Semantic Color Tokens — Warm Signal Dark ── */
[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: #38bdf8;
--info-dim: rgba(56, 189, 248, 0.12);
--cyan: #38bdf8;
--cyan-dim: rgba(56, 189, 248, 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);
}
/* ── Warm Signal Dark — OS preference (unless manually light) ── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #1c1916;
--surface: #262220;
--surface2: #302b28;
--surface-elevated: #3a3430;
--border: rgba(200, 180, 160, 0.08);
--border-bright: rgba(200, 180, 160, 0.16);
--text: #f0e8dc;
--text-dim: #a09888;
--text-muted: #7c756a;
--accent: #e85d2a;
--accent-dim: rgba(232, 93, 42, 0.1);
--accent-glow: rgba(232, 93, 42, 0.25);
--code-bg: #141210;
--code-text: #f0e8dc;
--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: #38bdf8;
--info-dim: rgba(56, 189, 248, 0.12);
--cyan: #38bdf8;
--cyan-dim: rgba(56, 189, 248, 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);
}
}
/* ── Typography Overrides ── */
body {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
h1, h2, h3, h4 {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700;
}
code, pre, .mono {
font-family: 'Azeret Mono', 'SF Mono', monospace;
}
/* ══════════════════════════════════════════════════════════════════
Slide mode — warm-signal aesthetic (used by forge-slides)
Warm radial glow, terracotta borders, ultra-light section numbers.
══════════════════════════════════════════════════════════════════ */
.deck .slide--title {
background-image:
radial-gradient(ellipse at 20% 80%, var(--accent-dim) 0%, transparent 55%),
linear-gradient(to bottom, var(--bg), var(--surface));
}
.deck .slide--title .slide__display {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 800;
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: 'Plus Jakarta Sans', system-ui, sans-serif;
color: var(--text);
letter-spacing: -0.5px;
}
.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: 'Plus Jakarta Sans', system-ui, sans-serif;
color: var(--accent);
}
.deck .slide--closing .cta {
box-shadow: 0 0 0 3px var(--accent-dim);
}