/* * StretchLearn — foundation tokens + layout primitives. * Ported verbatim from the StretchLearn design system (colors_and_type.css): * amethyst / iris-violet brand over slate neutrals, Inter Variable type, a * restrained shadow + radius scale, and a first-class dark theme that flips * under `.dark` on (persisted to localStorage 'sl-theme' by * navigation.js). Values mirror theme.json so the block editor and the * front end agree. No hard-coded colors live in components — only these tokens. */ :root { /* Surfaces (raw "R G B" triplets for rgb(var(--x) / )) */ --bg: 250 251 253; --surface: 255 255 255; --elevated: 255 255 255; --border: 226 232 240; --border-strong: 203 213 225; /* Ink */ --ink: 13 17 28; --ink-muted: 71 84 105; --ink-subtle: 117 129 149; /* Brand — amethyst / iris violet */ --brand-50: 245 242 254; --brand-100: 235 228 254; --brand-200: 216 201 252; --brand-400: 176 140 248; --brand-500: 142 79 240; --brand-600: 122 47 224; --brand-700: 99 33 201; --brand-900: 44 11 102; /* Accent + semantic */ --accent: 14 165 233; --success: 16 185 129; --warning: 234 179 8; --danger: 239 68 68; /* Hex aliases (flip in .dark) */ --c-bg: #fafbfd; --c-surface: #ffffff; --c-border: #e2e8f0; --c-border-strong: #cbd5e1; --c-ink: #0d111c; --c-ink-muted: #475569; --c-ink-subtle: #758195; --c-brand-50: #f5f2fe; --c-brand-100: #ebe4fe; --c-brand-200: #d8c9fc; --c-brand-400: #b08cf8; --c-brand-500: #8e4ff0; --c-brand-600: #7a2fe0; --c-brand-700: #6321c9; --c-brand-900: #2c0b66; --c-accent: #0ea5e9; --c-success: #10b981; --c-warning: #eab308; --c-danger: #ef4444; /* Theme-aware semantic surfaces */ --c-soft: #f5f2fe; --c-soft-bd: #d8c9fc; --c-soft-fg: #6321c9; --c-track: #eef2f7; --c-glass: rgb(250 251 253 / 0.85); --c-okbg: #ecfdf5; --c-okfg: #047857; --c-okbd: #a7f3d0; --c-warnbg: #fffbeb; --c-warnfg: #92400e; --c-warnbd: #fde68a; --c-errbg: #fff1f2; --c-errfg: #be123c; --c-errbd: #fecdd3; --c-mutebg: #f1f5f9; --c-mutefg: #64748b; --c-mutebd: #e2e8f0; /* Radius */ --radius-card: 0.5rem; --radius-panel: 0.75rem; --radius-marketing: 1.125rem; --radius-pill: 999px; /* Shadows */ --shadow-card: 0 1px 0 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06); --shadow-panel: 0 1px 0 0 rgb(15 23 42 / 0.05), 0 10px 30px -12px rgb(15 23 42 / 0.18); --shadow-overlay: 0 24px 48px -18px rgb(15 23 42 / 0.22); --shadow-focus: 0 0 0 4px rgb(var(--brand-500) / 0.16); --shadow-glow: 0 0 0 1px rgb(var(--brand-500) / 0.16), 0 10px 30px -12px rgb(var(--brand-500) / 0.35); /* Backgrounds / motifs */ --brand-glow: radial-gradient(60% 60% at 50% 0%, rgb(var(--brand-500) / 0.22) 0%, transparent 70%); --brand-mesh: radial-gradient(80% 60% at 80% 0%, rgb(var(--accent) / 0.22) 0%, transparent 60%), radial-gradient(60% 50% at 10% 10%, rgb(var(--brand-500) / 0.28) 0%, transparent 60%); --grid-faint: linear-gradient(rgb(15 23 42 / 0.04) 1px, transparent 1px), linear-gradient(90deg, rgb(15 23 42 / 0.04) 1px, transparent 1px); --grid-size: 44px 44px; --brand-tile: linear-gradient(135deg, var(--c-brand-500) 0%, var(--c-brand-600) 50%, var(--c-accent) 100%); /* Motion */ --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; /* Type */ --font-sans: "InterVariable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "InterVariable", "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace; /* Type scale */ --display-2xl: clamp(3rem, 1.8rem + 6vw, 4.5rem); --display-xl: clamp(2.5rem, 1.7rem + 4vw, 3.5rem); --display-lg: clamp(2.125rem, 1.6rem + 2.6vw, 2.75rem); --display-md: clamp(1.875rem, 1.5rem + 1.9vw, 2.25rem); --display-sm: clamp(1.5rem, 1.3rem + 1vw, 1.75rem); --text-xl: 1.25rem; --text-lg: 1.125rem; --text-base: 1rem; --text-sm: 0.875rem; --text-xs: 0.75rem; --eyebrow: 0.78rem; /* Layout */ --container-content: 47.5rem; --container-reading: 42rem; --container-wide: 75rem; --gutter: clamp(1rem, 0.55rem + 2vw, 2rem); color-scheme: light; } /* DARK — flips both raw triplets and hex aliases so every token-driven component adapts. Toggle by adding `.dark` to . */ .dark { --bg: 8 10 18; --surface: 16 19 30; --elevated: 22 26 41; --border: 33 41 60; --border-strong: 50 61 86; --ink: 235 240 252; --ink-muted: 167 178 201; --ink-subtle: 122 134 156; --brand-50: 36 16 70; --brand-100: 45 22 92; --brand-200: 110 86 170; --brand-400: 176 140 248; --brand-500: 176 124 246; --brand-600: 142 79 240; --brand-700: 165 116 247; --accent: 56 189 248; --c-bg: #080a12; --c-surface: #10131e; --c-border: #212940; --c-border-strong: #323d56; --c-ink: #ebf0fc; --c-ink-muted: #a7b2c9; --c-ink-subtle: #7a869c; --c-brand-50: #241046; --c-brand-100: #2d165c; --c-brand-200: #5b3fa0; --c-brand-400: #b08cf8; --c-brand-500: #a06cf5; --c-brand-600: #8e4ff0; --c-brand-700: #a574f7; --c-brand-900: #d8c9fc; --c-accent: #38bdf8; --c-soft: rgb(142 79 240 / 0.18); --c-soft-bd: rgb(176 140 248 / 0.30); --c-soft-fg: #cbb6ff; --c-track: rgb(255 255 255 / 0.10); --c-glass: rgb(14 17 28 / 0.82); --c-okbg: rgb(16 185 129 / 0.16); --c-okfg: #34d399; --c-okbd: rgb(16 185 129 / 0.34); --c-warnbg: rgb(234 179 8 / 0.16); --c-warnfg: #fbbf24; --c-warnbd: rgb(234 179 8 / 0.36); --c-errbg: rgb(244 63 94 / 0.16); --c-errfg: #fb7185; --c-errbd: rgb(244 63 94 / 0.34); --c-mutebg: rgb(255 255 255 / 0.06); --c-mutefg: #94a3b8; --c-mutebd: rgb(255 255 255 / 0.12); --shadow-card: 0 1px 0 0 rgb(0 0 0 / 0.30), 0 1px 3px 0 rgb(0 0 0 / 0.40); --shadow-panel: 0 1px 0 0 rgb(0 0 0 / 0.30), 0 14px 34px -14px rgb(0 0 0 / 0.62); --shadow-overlay: 0 28px 56px -20px rgb(0 0 0 / 0.70); color-scheme: dark; } /* Honor OS preference on first load, before navigation.js sets an explicit choice. Once the user toggles, `.dark`/`.light` on wins. */ @media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) { --bg: 8 10 18; --surface: 16 19 30; --elevated: 22 26 41; --border: 33 41 60; --border-strong: 50 61 86; --ink: 235 240 252; --ink-muted: 167 178 201; --ink-subtle: 122 134 156; --brand-50: 36 16 70; --brand-100: 45 22 92; --brand-200: 110 86 170; --brand-400: 176 140 248; --brand-500: 176 124 246; --brand-600: 142 79 240; --brand-700: 165 116 247; --accent: 56 189 248; --c-bg: #080a12; --c-surface: #10131e; --c-border: #212940; --c-border-strong: #323d56; --c-ink: #ebf0fc; --c-ink-muted: #a7b2c9; --c-ink-subtle: #7a869c; --c-brand-50: #241046; --c-brand-100: #2d165c; --c-brand-200: #5b3fa0; --c-brand-400: #b08cf8; --c-brand-500: #a06cf5; --c-brand-600: #8e4ff0; --c-brand-700: #a574f7; --c-brand-900: #d8c9fc; --c-accent: #38bdf8; --c-soft: rgb(142 79 240 / 0.18); --c-soft-bd: rgb(176 140 248 / 0.30); --c-soft-fg: #cbb6ff; --c-track: rgb(255 255 255 / 0.10); --c-glass: rgb(14 17 28 / 0.82); --c-okbg: rgb(16 185 129 / 0.16); --c-okfg: #34d399; --c-okbd: rgb(16 185 129 / 0.34); --c-warnbg: rgb(234 179 8 / 0.16); --c-warnfg: #fbbf24; --c-warnbd: rgb(234 179 8 / 0.36); --c-errbg: rgb(244 63 94 / 0.16); --c-errfg: #fb7185; --c-errbd: rgb(244 63 94 / 0.34); --c-mutebg: rgb(255 255 255 / 0.06); --c-mutefg: #94a3b8; --c-mutebd: rgb(255 255 255 / 0.12); --shadow-card: 0 1px 0 0 rgb(0 0 0 / 0.30), 0 1px 3px 0 rgb(0 0 0 / 0.40); --shadow-panel: 0 1px 0 0 rgb(0 0 0 / 0.30), 0 14px 34px -14px rgb(0 0 0 / 0.62); --shadow-overlay: 0 28px 56px -20px rgb(0 0 0 / 0.70); color-scheme: dark; } } /* ---- Base elements --------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--c-bg); color: var(--c-ink); font-family: var(--font-sans); font-size: 100%; line-height: 1.65; -webkit-text-size-adjust: 100%; font-feature-settings: "ss01" 1, "cv11" 1; } body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-size: var(--text-base); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin-block: 0; color: var(--c-ink); font-family: var(--font-display); font-weight: 620; line-height: 1.2; letter-spacing: -0.005em; } p { margin-block: 0 1em; } a { color: var(--c-brand-600); text-decoration: none; text-underline-offset: 0.18em; } a:hover { color: var(--c-brand-700); } img, svg, video { max-width: 100%; height: auto; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-card); } /* ---- Layout primitives ----------------------------------------------- */ .l-container { width: min(100% - (2 * var(--gutter)), var(--container-wide)); margin-inline: auto; } .l-container--reading { width: min(100% - (2 * var(--gutter)), var(--container-reading)); margin-inline: auto; } .l-stack { display: flex; flex-direction: column; gap: var(--stack-space, 1.5rem); } .l-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-space, 0.75rem); } .l-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); gap: var(--grid-gap, 1.25rem); } .u-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }