/* ============================================================ BEARMINDFUL — DESIGN TOKENS The single source of truth. Nothing below this file hardcodes a colour, a size, a duration or a curve. Scene: a parent and a four-year-old, side by side on a sofa at 7pm. One tablet propped on a cushion between them, curtains drawn, one warm lamp on. The child's hands are on the screen; the parent's voice is doing the work. ============================================================ */ /* ---------- FONTS (self-hosted, latin subset, no network) ---------- */ @font-face { font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/caprasimo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Faustina'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/faustina-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Faustina'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('../fonts/faustina-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; } :root { /* ========================================================== COLOUR — a forest at dusk: moss, bark, lamplight, rosehip. Every ramp is OKLCH. Hex fallbacks noted for reference only. ========================================================== */ --moss-900: oklch(0.22 0.030 118); /* #191c0c — ink */ --moss-700: oklch(0.38 0.070 118); /* #3f4718 */ --moss-500: oklch(0.58 0.115 118); /* #758329 — PRIMARY */ --moss-300: oklch(0.76 0.085 118); /* #acb97a */ --moss-100: oklch(0.94 0.030 118); /* #e9eed8 */ --dusk-900: oklch(0.18 0.040 210); /* #00161b — lights down */ --dusk-700: oklch(0.28 0.050 205); /* #003035 — story surface */ --dusk-500: oklch(0.40 0.055 200); /* #1c5153 */ --ember-500: oklch(0.70 0.165 55); /* #ea7d1c — ACCENT, the lamp */ --ember-300: oklch(0.84 0.100 65); /* #f8bd84 */ --berry-500: oklch(0.55 0.150 25); /* #b94642 — rosehip */ --sky-400: oklch(0.72 0.090 235); /* #69aed5 */ --bark-600: oklch(0.45 0.035 70); /* #625240 — muted on paper */ --paper: oklch(1 0 0); /* #ffffff — picture books are printed on white */ /* ---------------------------------------------------------- CONTRAST RULES — measured, not guessed. See design-system.html. moss-900 on paper ......... 17.24 body ✓ bark-600 on paper .......... 7.48 body ✓ moss-500 on paper .......... 4.17 LARGE TEXT ONLY paper on ember-500 ...... 2.81 ✗ NEVER. Use moss-900 on ember. paper on sky-400 ........ 2.44 ✗ NEVER. Use moss-900 on sky. moss-900 on ember-500 ...... 6.13 ✓ this is how CTAs are built paper on dusk-700 ....... 14.31 ✓ ember-500 on dusk-700 ...... 5.09 ✓ ---------------------------------------------------------- */ /* Semantic roles — the light world (default). Worlds override these. */ --bg: var(--paper); --bg-sunk: var(--moss-100); --surface: var(--paper); --ink: var(--moss-900); --ink-muted: var(--bark-600); --ink-inverse: var(--paper); --rule: oklch(0.22 0.030 118 / 0.14); --rule-strong: oklch(0.22 0.030 118 / 0.30); --brand: var(--moss-500); --brand-deep: var(--moss-700); --accent: var(--ember-500); --accent-soft: var(--ember-300); --on-accent: var(--moss-900); /* never --paper. See rules above. */ --focus: var(--ember-500); /* ========================================================== TYPE — a contrast-axis pair. Caprasimo: chunky rounded display, hand-lettered poster weight. Faustina: warm text serif, variable 300-800, real character. ========================================================== */ --font-display: 'Caprasimo', 'Trebuchet MS', ui-rounded, system-ui, sans-serif; --font-text: 'Faustina', Georgia, 'Times New Roman', serif; /* Fluid modular scale, ratio 1.333 (perfect fourth). Display ceiling is 6rem — above that a page is shouting. */ --step--1: clamp(0.90rem, 0.86rem + 0.20vw, 1.00rem); --step-0: clamp(1.05rem, 0.98rem + 0.34vw, 1.20rem); --step-1: clamp(1.30rem, 1.16rem + 0.68vw, 1.60rem); --step-2: clamp(1.60rem, 1.35rem + 1.22vw, 2.13rem); --step-3: clamp(1.95rem, 1.53rem + 2.05vw, 2.84rem); --step-4: clamp(2.35rem, 1.65rem + 3.40vw, 3.79rem); --step-5: clamp(2.80rem, 1.55rem + 6.10vw, 5.05rem); --step-6: clamp(3.20rem, 1.10rem + 10.2vw, 6.00rem); --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.6; --leading-loose: 1.75; /* Letter-spacing floor is -0.04em. Tighter and letters touch. */ --track-display: -0.025em; --track-tight: -0.015em; --track-normal: 0; --track-label: 0.02em; --measure: 62ch; /* prose */ --measure-read: 34ch; /* read-aloud lines, deliberately short */ /* ========================================================== SPACE — 4px base. Sections breathe fluidly. ========================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-section: clamp(4rem, 9vw, 9rem); --gutter: clamp(1.25rem, 4vw, 3.5rem); --width-page: 84rem; --width-text: 46rem; --width-wide: 102rem; /* ========================================================== SHAPE — this brand is round. ========================================================== */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 44px; --r-full: 999px; --ring: 4px; /* badge ring thickness */ /* Two-layer warm shadows. Reserved for badges and the player — not sprayed on every card. */ --shadow-1: 0 1px 2px oklch(0.22 0.030 118 / 0.08), 0 4px 10px -4px oklch(0.22 0.030 118 / 0.14); --shadow-2: 0 2px 0 oklch(0.22 0.030 118 / 0.10), 0 12px 24px -10px oklch(0.22 0.030 118 / 0.26); --shadow-badge: 0 3px 0 oklch(0.22 0.030 118 / 0.16), 0 20px 34px -14px oklch(0.22 0.030 118 / 0.42); --shadow-badge-lift: 0 5px 0 oklch(0.22 0.030 118 / 0.18), 0 30px 46px -16px oklch(0.22 0.030 118 / 0.48); --shadow-lamp: 0 0 60px -10px oklch(0.70 0.165 55 / 0.45); /* ========================================================== TOUCH — NN/g: ages 3-6 need ~2cm targets. We go bigger. ========================================================== */ --nav-h: 78px; /* the sticky header, measured not guessed */ --tap-min: 64px; /* adult chrome */ --tap-child: 96px; /* anything a 4-year-old aims at */ --tap-hero: 132px; /* the one giant play button */ /* ========================================================== MOTION — no bounce, no elastic, never `all`, never scale(0). ========================================================== */ --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dur-press: 140ms; --dur-ui: 220ms; --dur-panel: 320ms; --dur-scene: 620ms; /* ========================================================== LAYERS — semantic, never arbitrary. ========================================================== */ --z-base: 0; --z-badge: 10; --z-sticky: 20; --z-scrim: 30; --z-dialog: 40; --z-toast: 50; } /* Very large screens (living-room TV, big desktop): scale the whole system up rather than stretching the container. Because the clamp ceilings are in rem, this lifts type, space and targets together. */ @media (min-width: 2200px) { :root { font-size: 118%; } } /* ============================================================ WORLDS — the site has a daytime and a bedtime. Applied as a class on . ============================================================ */ /* STUDIO — Tab 1. Daytime. Ink on a desk. Curious. */ .world-studio { --bg: var(--paper); --bg-sunk: var(--moss-100); --brand: var(--moss-700); --accent: var(--ember-500); } /* FOREST — Tab 3. Daytime. Active, colourful, playful. */ .world-forest { --bg: var(--paper); --bg-sunk: var(--moss-100); --brand: var(--moss-500); --accent: var(--berry-500); /* Rosehip is dark (L 0.55), so it takes PAPER ink, not the moss-900 the root sets for ember. moss-900 on berry measures 3.29:1 and fails; paper on berry is 5.23:1. A world that changes --accent must change --on-accent with it. */ --on-accent: var(--paper); } /* DUSK — Tab 2. Bedtime. Low-glare by design. */ .world-dusk { --bg: var(--dusk-700); --bg-sunk: var(--dusk-900); --surface: oklch(0.33 0.048 203); --ink: var(--paper); --ink-muted: oklch(0.78 0.035 200); --ink-inverse: var(--moss-900); --rule: oklch(1 0 0 / 0.16); --rule-strong: oklch(1 0 0 / 0.32); --brand: var(--moss-300); --accent: var(--ember-500); --accent-soft: var(--ember-300); --on-accent: var(--moss-900); --focus: var(--ember-300); --shadow-1: 0 1px 2px oklch(0 0 0 / 0.30), 0 4px 12px -4px oklch(0 0 0 / 0.45); --shadow-2: 0 2px 0 oklch(0 0 0 / 0.32), 0 14px 28px -10px oklch(0 0 0 / 0.55); } /* LIGHTS DOWN — the story, one step deeper. Rare, so it can be slow. */ .world-dusk.is-lights-down { --bg: var(--dusk-900); --bg-sunk: oklch(0.12 0.030 210); --surface: oklch(0.22 0.040 208); --ink-muted: oklch(0.66 0.030 200); } /* HOME — white paper, moss brand, and the lamp for the accent. The front door speaks the story's language, so its CTA is amber; the forest world's rosehip belongs to Tab 3. */ .world-home { --bg: var(--paper); --bg-sunk: var(--moss-100); --brand: var(--moss-700); --accent: var(--ember-500); --on-accent: var(--moss-900); } /* COVER — the homepage is the book cover. Golden hour. Scoped to the cover ELEMENT, never to . Put it on the body and every light section underneath inherits --ink: white and renders white text on a white background at 1.0:1. A world describes a region, so it belongs on that region. */ .world-cover { --bg: var(--dusk-700); --ink: var(--paper); --ink-muted: oklch(0.80 0.035 200); --rule: oklch(1 0 0 / 0.18); --accent: var(--ember-500); --on-accent: var(--moss-900); --focus: var(--ember-300); color: var(--ink); }