/* ─────────────────────────────────────────────────────────────
Get Lost — Storybook design system · tokens
Drop-in stylesheet. Defines :root tokens, base reset, paper
grain + fiber overlay helpers. Load before components.css.
──────────────────────────────────────────────────────────── */
:root {
/* ─── Paper tones (every surface sits on cream) ─── */
--paper: #f1e7d3; /* default page surface */
--paper-warm: #ede0c4; /* slightly warmer cream — section blocks */
--paper-deep: #e6d5b0; /* oatmeal — recovered-time archive base */
--paper-cream: #fbf2dd; /* card surface, brighter than paper */
--paper-oat: #e8dabf; /* secondary card / divider tint */
/* ─── Ink (text, linework, figures) ─── */
--ink: #1c1a16; /* primary ink — figures, headings, frames */
--ink-soft: rgba(28, 26, 22, 0.72);
--ink-mute: rgba(28, 26, 22, 0.46);
--ink-faint: rgba(28, 26, 22, 0.24);
--rule: rgba(28, 26, 22, 0.14);
--rule-strong: rgba(28, 26, 22, 0.28);
/* ─── Calm color pops ───────────────────────────────────────
Used as washes, sigils, and accent strokes. Never as solid
page floods. Keep saturation muted — every color is rolled
toward cream-paper neutrality. */
/* Warm sun family */
--sun: #f0b94c; /* marigold — primary action color */
--sun-deep: #d8901f; /* depth + active state */
--sun-glow: #f8d57a; /* outer wash */
--cream-glow: #fcebc0; /* golden-hour wash */
/* Warm coral family */
--coral: #e07a5f; /* secondary action, accent strokes */
--rose: #d99889; /* dusty rose — moons, washes */
--blush: #f0c4b4; /* soft pink clouds */
--terracotta: #b85a3c; /* eyebrow text, wax seal, active nav */
/* Cool greens */
--sage: #8aa784; /* solo sigil + soft hills */
--moss: #5d7a52; /* hill outlines + solo-star outlines */
--leaf: #aac49a; /* filled hills */
/* Cool blues */
--cerulean: #88b1cd; /* dusty blue — sky top, accent stars */
--sky: #b8d3e3; /* paler sky */
--indigo: #4a5d8a; /* deep accent — rare */
/* Cool purples */
--plum: #9c6e8a; /* alt accent for variety */
/* ─── Typography ─── */
--serif: "Fraunces", "Cormorant Garamond", "Georgia", serif;
--hand: "Caveat", "Bradley Hand", "Marker Felt", cursive;
--sans: "Montserrat", "Avenir Next", system-ui, sans-serif;
/* ─── Geometry ─── */
--r-card: 4px; /* paper cards stay nearly square */
--r-pill: 999px;
--r-chip: 6px;
/* ─── Motion ─── */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ─── Reset / base ─── */
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
font-feature-settings: "kern";
}
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }
a { color: var(--terracotta); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ─── Paper texture overlays ────────────────────────────────────
Apply both classes on any element that should feel like paper:
They use ::before / ::after so the host element needs
`position: relative` and contained children at z-index >= 2. */
.paper-grain {
position: relative;
}
.paper-grain::before {
content: ""; position: absolute; inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.12;
mix-blend-mode: multiply;
z-index: 1;
}
.paper-fiber {
position: relative;
}
.paper-fiber::after {
content: ""; position: absolute; inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 600px 600px;
z-index: 1;
}
body.paper-grain > .stage,
body.paper-fiber > .stage,
body.paper-grain > .footline,
body.paper-fiber > .footline {
position: relative;
z-index: 2;
}
body.paper-grain > .topbar,
body.paper-fiber > .topbar,
body.paper-grain > .drawer,
body.paper-fiber > .drawer,
body.paper-grain > .universe-page,
body.paper-fiber > .universe-page {
z-index: 2;
}