/* ========================================================================== Martha — design tokens The page travels: night → dawn → morning. Day (warm milk-cream) is the DEFAULT palette — most of the page lives there. Night is a *zone*, not a global theme: apply .zone--night to any section that should feel like 3 a.m. (the hero, the lesson preview, the footer). The reader page is a special case — it is genuinely read in the dark — so it opts the whole document in with [data-reading="night"] on . ========================================================================== */ :root, /* .zone--day exists so an element that lives *inside* a night zone can hand itself back to daylight. The sticky header does exactly that the moment it stops floating over the hero and lands on the cream page. Same values as :root — this is a second name for the default palette, not a variant. */ .zone--day { /* ---- Fixed brand colours ------------------------------------------- These never change between zones, so gradients can blend across a night → cream boundary using a single source of truth. */ --brand-night: oklch(24% 0.045 278); /* deep blue-lavender, not black */ --brand-night-deep: oklch(19.5% 0.042 280); --brand-cream: oklch(96.8% 0.014 78); /* warm milk */ --brand-cream-deep: oklch(93.6% 0.020 74); /* ---- Palette: day (default) ----------------------------------------- */ --c-bg: var(--brand-cream); --c-bg-deep: var(--brand-cream-deep); --c-surface: oklch(99.2% 0.008 82); --c-surface-2: oklch(97.4% 0.012 78); --c-line: oklch(87% 0.018 70); --c-line-soft: oklch(91.5% 0.014 74); --c-text: oklch(26% 0.038 268); /* deep ink blue */ --c-text-dim: oklch(41% 0.032 268); --c-text-mute: oklch(51% 0.028 268); --c-amber: oklch(58% 0.155 48); /* terracotta amber — CTA fill */ --c-amber-soft: oklch(64% 0.150 54); --c-amber-ink: oklch(99% 0.012 80); /* text on amber */ --c-amber-glow: oklch(78% 0.150 62 / 0.30); --c-peach: oklch(88% 0.070 62); /* soft warm wash */ --c-lavender: oklch(50% 0.095 300); --c-lavender-dim: oklch(93% 0.032 300 / 0.85); --c-blue: oklch(46% 0.075 244); --c-blue-dim: oklch(92% 0.030 244 / 0.80); --c-focus: oklch(46% 0.15 48); --shadow-soft: 0 1px 2px oklch(45% 0.04 268 / 0.09), 0 10px 28px -18px oklch(38% 0.05 268 / 0.32); --shadow-lift: 0 1px 3px oklch(45% 0.04 268 / 0.10), 0 24px 56px -26px oklch(35% 0.06 268 / 0.38); --shadow-glow: 0 0 0 1px oklch(58% 0.155 48 / 0.22), 0 16px 40px -18px var(--c-amber-glow); --glass-bg: oklch(99% 0.010 80 / 0.78); --glass-line: oklch(30% 0.03 268 / 0.10); --glass-blur: saturate(150%) blur(14px); /* ---- Type ---------------------------------------------------------- */ --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --text-hero: clamp(2.4rem, 1.55rem + 4.3vw, 4.4rem); --text-h2: clamp(1.75rem, 1.28rem + 2.2vw, 2.7rem); --text-h3: clamp(1.2rem, 1.08rem + 0.6vw, 1.45rem); --text-lead: clamp(1.0625rem, 0.99rem + 0.42vw, 1.25rem); --text-base: clamp(1rem, 0.975rem + 0.14vw, 1.0625rem); --text-read: clamp(1.075rem, 1rem + 0.42vw, 1.2rem); --text-sm: 0.9rem; --text-xs: 0.78rem; --lh-tight: 1.06; --lh-snug: 1.22; --lh-body: 1.62; --lh-read: 1.72; --track-tight: -0.028em; --track-wide: 0.14em; /* ---- Space --------------------------------------------------------- */ --space-section: clamp(4.25rem, 2.6rem + 7vw, 8.5rem); --space-gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem); --measure: 36rem; --measure-wide: 68rem; /* ---- Shape --------------------------------------------------------- */ --r-sm: 10px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-pill: 999px; /* ---- Motion -------------------------------------------------------- */ --dur-fast: 160ms; --dur: 300ms; --dur-slow: 620ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.32, 0.72, 0.24, 1); color-scheme: light; } /* ========================================================================== Night — a zone on the landing page, the whole document in the reader. ========================================================================== */ .zone--night, [data-reading="night"] { --c-bg: var(--brand-night); --c-bg-deep: var(--brand-night-deep); --c-surface: oklch(29% 0.048 276); --c-surface-2: oklch(33.5% 0.050 274); --c-line: oklch(42% 0.046 276); --c-line-soft: oklch(35.5% 0.044 276); --c-text: oklch(96.5% 0.016 84); /* Deliberately light: on the hero these carry the reassurance line, and at 66% they dissolved into the background. */ --c-text-dim: oklch(87% 0.022 80); --c-text-mute: oklch(77% 0.026 274); --c-amber: oklch(83% 0.130 66); --c-amber-soft: oklch(90% 0.080 72); --c-amber-ink: oklch(22% 0.060 50); --c-amber-glow: oklch(76% 0.150 60 / 0.36); --c-peach: oklch(86% 0.075 60); --c-lavender: oklch(84% 0.075 302); --c-lavender-dim: oklch(50% 0.070 300 / 0.30); --c-blue: oklch(80% 0.062 244); --c-blue-dim: oklch(46% 0.055 244 / 0.32); --c-focus: oklch(90% 0.10 72); --shadow-soft: 0 1px 2px oklch(0% 0 0 / 0.28), 0 10px 28px -16px oklch(0% 0 0 / 0.55); --shadow-lift: 0 1px 3px oklch(0% 0 0 / 0.32), 0 24px 56px -22px oklch(0% 0 0 / 0.62); --shadow-glow: 0 0 0 1px oklch(83% 0.130 66 / 0.24), 0 18px 48px -18px var(--c-amber-glow); --glass-bg: oklch(30% 0.048 276 / 0.66); --glass-line: oklch(90% 0.02 80 / 0.12); color-scheme: dark; }