/* =============================================================================
Lv4 Multiverse — Design Tokens
-----------------------------------------------------------------------------
Dark theme primary. Indigo base, amber = active-run, cyan = interactive,
violet = UDSH-only. Monospace for all numeric data.
============================================================================= */
/* ---------- Fonts (self-hosted where possible) ---------- */
@font-face {
font-family: "Inter";
src: url("fonts/Inter-Variable.woff2") format("woff2-variations");
font-weight: 100 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "JetBrains Mono";
src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
font-weight: 100 800;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Source Serif 4";
src: url("fonts/SourceSerif4-Variable.woff2") format("woff2-variations");
font-weight: 200 900;
font-display: swap;
font-style: normal;
}
/* If self-hosted files are missing, the Google Fonts import below is a fallback
that any prototype can opt into by uncommenting in its :
*/
:root {
/* ---------- Color scale: indigo/cosmic base ---------- */
--indigo-950: #070A15; /* app background */
--indigo-900: #0B1120; /* section bg */
--indigo-800: #131A2E; /* card bg */
--indigo-700: #1A2244; /* elevated / hover */
--indigo-600: #242C48; /* border */
--indigo-500: #3A4570; /* subtle border / separator */
--indigo-400: #6B7AA5; /* dim text */
--indigo-300: #8F9BC2; /* secondary text */
--indigo-200: #C6CEE4; /* tertiary text on dark */
--indigo-100: #E6EAF5; /* primary text on dark */
--indigo-050: #F4F6FC; /* light-theme bg */
/* ---------- Accents ---------- */
--amber-500: #FFB547; /* ACTIVE RUN — reserved */
--amber-600: #E99620; /* amber hover */
--amber-200: #FFDCA0; /* amber on dark text/glow */
--cyan-500: #7CE3E1; /* interactive */
--cyan-600: #4FCBC9; /* cyan hover / pressed */
--cyan-200: #C1F0EF; /* cyan soft */
--violet-500: #B089FF; /* UDSH mode */
--violet-600: #8A5FE3;
--violet-200: #DFD0FF;
/* ---------- Semantic ---------- */
--good: #4ADE80;
--warn: #FFB547;
--bad: #FF6B6B;
/* ---------- Semantic surface tokens (use these, not the raw scale) ---------- */
--bg: var(--indigo-950);
--bg-elev: var(--indigo-900);
--bg-card: var(--indigo-800);
--bg-hover: var(--indigo-700);
--border: var(--indigo-600);
--border-mute: var(--indigo-500);
--fg: var(--indigo-100);
--fg-mute: var(--indigo-300);
--fg-dim: var(--indigo-400);
--fg-invert: #071020; /* text on amber/cyan buttons */
--accent: var(--cyan-500);
--accent-hover: var(--cyan-600);
--accent-active: var(--amber-500); /* "active run" accent */
--accent-udsh: var(--violet-500);
/* ---------- Type ---------- */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
--font-serif: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif;
--text-display: 2.5rem; /* 40px */
--text-h1: 1.75rem; /* 28px */
--text-h2: 1.375rem; /* 22px */
--text-h3: 1.125rem; /* 18px */
--text-body: 0.875rem; /* 14px */
--text-small: 0.75rem; /* 12px */
--text-micro: 0.6875rem; /* 11px */
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-norm: 1.55;
--lh-loose: 1.75;
--ls-tight: -0.02em;
--ls-snug: -0.01em;
--ls-wide: 0.04em;
/* ---------- Spacing (4px base) ---------- */
--space-0: 0;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-7: 2rem; /* 32 */
--space-8: 3rem; /* 48 */
--space-9: 4rem; /* 64 */
/* ---------- Radii ---------- */
--radius-sm: 4px;
--radius-md: 6px; /* default */
--radius-lg: 10px; /* marketing cards */
--radius-pill: 999px;
/* ---------- Elevation ---------- */
--shadow-1: 0 1px 0 rgba(0,0,0,0.5);
--shadow-2: 0 12px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px var(--border);
/* ---------- Motion ---------- */
--ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 120ms;
--dur-med: 300ms;
--dur-slow: 600ms;
/* ---------- Layout ---------- */
--sidebar-w: 224px;
--rail-w: 320px;
--topbar-h: 48px;
}
/* ---------- Light theme (for Wiki reader + a11y) ---------- */
:root[data-theme="light"] {
--bg: #FBFBF7; /* warm paper */
--bg-elev: #FFFFFF;
--bg-card: #FFFFFF;
--bg-hover: #F1F1EC;
--border: #E2E0D6;
--border-mute: #EAE8DF;
--fg: #1A1C22;
--fg-mute: #4A4E58;
--fg-dim: #7A7F8A;
--fg-invert: #FFFFFF;
--accent: #3A8A88; /* darker cyan for AA */
--accent-hover: #2A6E6C;
--accent-active: #B5791A; /* darker amber for AA */
}
/* ---------- Semantic CSS: base ---------- */
html, body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--text-body);
line-height: var(--lh-norm);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
.display, h1.display {
font-size: var(--text-display);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
font-weight: 600;
margin: 0;
}
h1 { font-size: var(--text-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); font-weight: 600; margin: 0; }
h2 { font-size: var(--text-h2); line-height: var(--lh-snug); font-weight: 600; margin: 0; }
h3 { font-size: var(--text-h3); line-height: 1.4; font-weight: 600; margin: 0; }
p { margin: 0 0 var(--space-3); }
small { font-size: var(--text-small); color: var(--fg-mute); }
.micro {
font-size: var(--text-micro);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--fg-mute);
font-weight: 600;
}
.num, code, pre, kbd, .data, .mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "cv11" 1;
}
code { font-size: 0.92em; }
pre {
background: var(--bg);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border: 1px solid var(--border);
overflow-x: auto;
font-size: 0.85em;
}
.serif {
font-family: var(--font-serif);
font-size: 1.0625rem;
line-height: 1.7;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
/* ---------- Utility: pill / badge ---------- */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px 8px;
font-size: var(--text-micro);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-weight: 600;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
color: var(--fg-mute);
background: transparent;
}
.pill--running { color: var(--amber-500); border-color: var(--amber-500); }
.pill--complete { color: var(--good); border-color: var(--good); }
.pill--udsh { color: var(--violet-500); border-color: var(--violet-500); }
.pill--cyan { color: var(--cyan-500); border-color: var(--cyan-500); }