/* ================================================================
SELFLEVER WARM DESIGN SYSTEM
Direction: Warm functional
Canvas: #FBF7F0 (sand)
Accent: #0EA5A0 (ocean teal)
Peach: #FFD4B5 (status pills only)
Font: Plus Jakarta Sans
Radius: 20px cards / 12px inner / 999px pills
Shadow: 0 6px 18px rgba(75,53,18,0.06)
Signature: SVG cohesion donut
Version: 1.1 (2026-05-29) - nav coherence pass
Google Fonts is loaded PER PAGE via in .
See ../_internal/warm-system.md for the canonical snippet.
================================================================ */
/* ----------------------------------------------------------------
CUSTOM PROPERTIES
---------------------------------------------------------------- */
:root {
/* Canvas */
--canvas: #FBF7F0;
--canvas-elev: #FFFFFF;
/* Ink */
--ink: #1A1610;
--ink-2: #4A3F33;
--ink-3: #7A6F60;
/* Structure */
--line: #EFE6D7;
/* Accent */
--accent: #0EA5A0;
--accent-soft: rgba(14, 165, 160, 0.10);
/* Status */
--peach: #FFD4B5;
--peach-ink: #7A3E10;
--ok: #2B8A57;
--warn: #B45309;
--err: #B91C1C;
/* Shape */
--radius: 20px;
--radius-sm: 12px;
--radius-pill: 999px;
/* Elevation */
--shadow: 0 6px 18px rgba(75, 53, 18, 0.06);
/* Typography */
--font: "Plus Jakarta Sans", system-ui, sans-serif;
/* Specimen-name aliases (backwards compat with style-warm.html inline styles) */
--surface: #FFFFFF;
--border: #EFE6D7;
--text: #1A1610;
--text2: #4A3F33;
--text3: #7A6F60;
--accent-dim: rgba(14, 165, 160, 0.10);
--peach-text: #7A3E10;
--green: #2B8A57;
--red: #B91C1C;
/* Dilts level palette (indices 0-6, matching HERO_LEVEL_COLORS) */
--lc0: #eab308; /* Environment */
--lc1: #06b6d4; /* Behaviour */
--lc2: #22c55e; /* Capability */
--lc3: #ef4444; /* Beliefs */
--lc4: #f97316; /* Values */
--lc5: #a855f7; /* Identity */
--lc6: #3b82f6; /* Mission */
}
/* Dark-mode overrides (warm-dark, not generic-dark) */
[data-theme="dark"] {
--canvas: #1F1A14;
--canvas-elev: #2A2218;
--ink: #F2EAD9;
--ink-2: rgba(242, 234, 217, 0.65);
--ink-3: rgba(242, 234, 217, 0.42);
--line: rgba(242, 234, 217, 0.12);
--accent: #0EA5A0;
--accent-soft: rgba(14, 165, 160, 0.14);
--peach: #FFD4B5;
--peach-ink: #5C2A04;
--shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
/* Specimen aliases in dark mode */
--surface: #2A2218;
--border: rgba(242, 234, 217, 0.12);
--text: #F2EAD9;
--text2: rgba(242, 234, 217, 0.65);
--text3: rgba(242, 234, 217, 0.42);
--accent-dim: rgba(14, 165, 160, 0.14);
--peach-text: #5C2A04;
--green: #2B8A57;
--red: #B91C1C;
}
/* ----------------------------------------------------------------
RESET + BASE
---------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--canvas);
color: var(--ink);
font-family: var(--font);
font-size: 15px;
line-height: 1.6;
font-style: normal;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}
/* ----------------------------------------------------------------
LAYOUT HELPERS
---------------------------------------------------------------- */
.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.grid-4 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 16px;
}
@media (max-width: 720px) {
.wrap { padding: 0 16px; }
.grid-4 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
}
/* ----------------------------------------------------------------
NAVIGATION
Nav height is locked at 56px via min-height + height on .nav-inner.
.nav itself has no height so border-bottom renders correctly.
---------------------------------------------------------------- */
.nav {
background: var(--canvas-elev);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow);
}
.nav-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
height: 56px;
min-height: 56px;
display: flex;
align-items: center;
gap: 8px;
}
@media (max-width: 480px) {
.nav-inner { padding: 0 16px; }
}
/* .brand works as both and