/* ============================================================ LearnWords AI — Design Tokens & Theme Engine (v3 · "Ink & Paper") ------------------------------------------------------------ Single source of truth for color/typography across every host (Telegram Mini App, Reading.Web, future MAUI WebView). v3 moves OFF the generic "vibecoder" look (Inter + sapphire + floating rounded cards + soft shadows) toward an editorial / literary identity: Schibsted Grotesk (UI) + Newsreader / Literata (display + reading serif), a single TERRACOTTA accent, crisp small radii, flat hairline-ruled surfaces, and the "orbit" memory motif. THREE explicit palettes + auto, selected via the `data-theme` attribute on (set by theme.js / ThemeService). The internal keys are kept from v2 for backward-compatible persistence; only the palettes + display labels changed: (no attribute) → "auto": follows Telegram --tg-theme-* inside Telegram, else OS prefers-color-scheme (falls back to NIGHT off-Telegram) data-theme="dark" → NIGHT (observatory cosmos, lamplight gold) data-theme="cool" → COOL (clean editorial light, terracotta) data-theme="sepia" → PAPER (warm book stock, spice-rust accent) KEY PRIMITIVE — `--on-surface-rgb` The RGB triplet of the foreground "ink" for the current theme. Inline page styles compose neutral fills/borders as rgba(var(--on-surface-rgb), ) so one token flips every translucent overlay per theme. Same idea for --accent-rgb. Type stacks: --font (UI sans), --font-display (brand/heading serif), --font-reading (book body serif, user-overridable), --font-mono. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---------- Geometry / motion / type stacks (theme-independent) ---------- Small, crisp editorial radii. Pill (999) is kept for true circles (avatars, toggles) — NOT for cards/buttons, which read as flat plates. */ --radius-xs: 3px; --radius-sm: 4px; --radius: 6px; --radius-lg: 12px; --radius-pill: 999px; /* ---------- Content width tiers (theme-independent layout) ---------- Width follows CONTENT TYPE, not the page — one source of truth for both hosts (main app + Reading.Web) so the two can't drift. All are max-widths: phones (viewport < cap) stay full-width; margin-inline:auto only centers once the screen is wider than the cap. readable — text, forms, lists, settings, reading prose (~70–75 chars) wide — card-grid catalogs / book shelves narrow — auth screens & modal dialogs Apply via the .lw-container-readable / .lw-container-wide utilities below, or `max-width: var(--w-…)` on an existing page wrapper. */ --w-readable: 700px; --w-wide: 1180px; --w-narrow: 440px; --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 110ms cubic-bezier(0.4, 0, 0.2, 1); --font: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; /* Brand / heading face — the editorial serif. Big numbers, titles, the word on a flashcard, chapter names. Applied by the .lw-type-display/title-* utils. */ --font-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; /* Reading surfaces (story body, parallel text) read this. Serif by default on EVERY theme now (the product is editorial); the reader's font-family setting (ReadingPreferences) overrides it per user. */ --font-reading: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; /* Optional decorative page background (per-theme: night starfield, paper sun-wash + ruled stock; cool leaves it none). Applied on in reset.css. */ --paper-texture: none; /* ---------- Spacing scale (4px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---------- Type scale (theme-independent) ---------- Use these EVERYWHERE instead of inline font-size. Pair with the .lw-type-* utility classes at the bottom of this file. The display + title tiers render in --font-display (serif); body/caption stay sans. */ --type-display-size: 32px; --type-display-line: 38px; --type-display-weight: 600; --type-display-track: -0.02em; --type-title-l-size: 22px; --type-title-l-line: 28px; --type-title-l-weight: 600; --type-title-l-track: -0.015em; --type-title-m-size: 18px; --type-title-m-line: 24px; --type-title-m-weight: 600; --type-title-m-track: -0.01em; --type-title-s-size: 15px; --type-title-s-line: 21px; --type-title-s-weight: 600; --type-title-s-track: -0.005em; --type-body-l-size: 16px; --type-body-l-line: 26px; --type-body-l-weight: 400; --type-body-l-track: 0; --type-body-size: 14px; --type-body-line: 22px; --type-body-weight: 400; --type-body-track: 0; --type-body-s-size: 12px; --type-body-s-line: 18px; --type-body-s-weight: 400; --type-body-s-track: 0.002em; --type-caption-size: 11px; --type-caption-line: 16px; --type-caption-weight: 500; --type-caption-track: 0.14em; --type-reading-size: 18px; --type-reading-line: 30px; --type-reading-weight: 400; --type-reading-track: 0.002em; /* ---------- App shell (adaptive navigation frame) — theme-independent geometry ---------- */ --shell-topbar-h: 52px; /* content height of the top bar (excl. safe-area) */ --shell-tabbar-h: 58px; /* mobile bottom tab bar (excl. safe-area) */ --shell-rail-w: 84px; /* desktop side rail width */ --shell-z-chrome: 50; /* top bar / tab bar / rail stacking */ /* Approximate height of an in-page .page-header (h1 row + padding). Used by sticky controls to anchor "just under the header" without each page having to know the exact number. */ --page-header-h: 60px; /* Footprint reserved on the RIGHT edge of every sticky page header for the global "+" quick-add FAB (QuickAddLauncher — position: fixed, top-right). */ --fab-inset-right: calc(var(--safe-right) + 60px); /* Device safe-area insets (notches, home indicator). Resolve to 0px off-device. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* ============================================================ AUTO mode (default — no data-theme attribute) Bridges Telegram theme vars when inside Mini App; otherwise falls back to the NIGHT palette below for off-Telegram clients. ============================================================ */ --bg: var(--tg-theme-bg-color, #0b0e15); --bg-secondary: var(--tg-theme-secondary-bg-color, #10131d); --bg-elevated: #1a1f30; --card-bg: var(--tg-theme-section-bg-color, #141826); --card-border: rgba(230, 232, 240, 0.12); --card-hover: rgba(230, 232, 240, 0.06); --text: var(--tg-theme-text-color, #e6e8f0); --text-secondary: var(--tg-theme-subtitle-text-color, #9298a8); --hint: var(--tg-theme-hint-color, #5c6373); --on-surface-rgb: 230, 232, 240; --accent: var(--tg-theme-accent-text-color, var(--tg-theme-link-color, #e07a4e)); --accent-rgb: 224, 122, 78; --accent-strong: #ec9069; --accent-soft: rgba(224, 122, 78, 0.16); --accent-light: rgba(224, 122, 78, 0.16); /* v1 alias */ /* ---------- Loader cosmos (boot splash + LoadingOverlay) ---------- The orbital loader is a self-contained DARK starfield with a per-theme HUE — even on the light themes it stays a dark sky (cool = navy/blue, paper = warm umber/gold) so the starlight actually reads. The loader CSS remaps the page tokens it uses (--bg / --text / --accent*) to these, so one block re-skins the whole loader: --loader-bg dark sky base --loader-text(-dim) light ink for the wordmark + status line --loader-accent-rgb the hue (orbit rings, word-chips, comet streak) --star-* / --star-peak starlight + twinkle depth --meteor-tip-rgb the comet's bright leading head */ --loader-bg: #0b0e15; --loader-text: #e6e8f0; --loader-text-dim: #9298a8; --loader-accent-rgb: 224, 122, 78; --star-rgb: 255, 255, 255; --star-alt-rgb: 130, 185, 250; --star-glow: rgba(180, 210, 255, 0.8); --star-peak: 1; --meteor-tip-rgb: 255, 255, 255; --button-bg: var(--tg-theme-button-color, #e07a4e); --button-text: var(--tg-theme-button-text-color, #190f08); --success: #9cc77f; --success-rgb: 156, 199, 127; --warning: #e0b25a; --warning-rgb: 224, 178, 90; --destructive: var(--tg-theme-destructive-text-color, #e08a7f); --destructive-rgb: 224, 138, 127; --info: #7fb6cf; --info-rgb: 127, 182, 207; /* SRS progress ring — purple, deliberately distinct from --accent and --info. */ --srs: #b39bff; --srs-rgb: 179, 155, 255; /* Stabilized-through-FSRS (auto-mastered) — teal, distinct from accent. */ --mastered-stable: #1ec8b8; --mastered-stable-rgb: 30, 200, 184; /* SRS rating hues (flashcard Again/Hard/Good/Easy) — warm, restrained. */ --again: #e08a7f; --hard: #e0b25a; --good: #7fb6cf; --easy: #9cc77f; --word-new-bg: rgba(224, 122, 78, 0.16); --word-new-line: var(--accent); --word-new-text: var(--text); --word-seen-bg: rgba(224, 122, 78, 0.09); --word-seen-line: transparent; --word-seen-text: var(--text); --word-learning-bg: transparent; --word-learning-line: var(--accent); --word-learning-text: var(--text); --word-familiar-bg: transparent; --word-familiar-line: rgba(224, 122, 78, 0.4); --word-familiar-text: var(--text); --word-mastered-bg: transparent; --word-mastered-line: transparent; --word-mastered-text: var(--text); /* v1 compat — reader still references these. */ --hl-ai-bg: var(--word-new-bg); --hl-ai-border: var(--word-new-line); --hl-user-bg: var(--word-learning-bg); --hl-user-border: var(--word-learning-line); --hl-added: var(--success); /* Editorial = flat surfaces. shadow-1/2 are off; shadow-3 stays for genuinely floating overlays (modals, bottom sheets, dropdowns, the quick-add FAB). */ --shadow-1: none; --shadow-2: none; --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55); --shadow: var(--shadow-2); /* Night cosmos: scattered star dust + a warm Mars glow + a faint cool nebula. */ --paper-texture: radial-gradient(1.5px 1.5px at 14% 16%, rgba(255,255,255,.75), transparent 60%), radial-gradient(1px 1px at 32% 9%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1.5px 1.5px at 57% 21%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1px 1px at 88% 29%, rgba(255,255,255,.55), transparent 60%), radial-gradient(1.5px 1.5px at 8% 43%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 45% 51%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 70% 61%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1.5px 1.5px at 22% 72%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 90% 69%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 37% 85%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1px 1px at 64% 92%, rgba(255,255,255,.35), transparent 60%), radial-gradient(170px 170px at 93% 6%, rgba(224,122,78,.11), transparent 70%), radial-gradient(240px 220px at 6% 98%, rgba(120,150,220,.06), transparent 72%); } /* AUTO mode under a light OS preference (only when not forced to a theme). Off-Telegram light users land on the COOL editorial palette. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: var(--tg-theme-bg-color, #eef1f5); --bg-secondary: var(--tg-theme-secondary-bg-color, #e3e8ee); --bg-elevated: #ffffff; --card-bg: var(--tg-theme-section-bg-color, #fbfcfe); --card-border: rgba(27, 32, 39, 0.12); --card-hover: #f3f6fa; --text: var(--tg-theme-text-color, #1b2027); --text-secondary: var(--tg-theme-subtitle-text-color, #586271); --hint: var(--tg-theme-hint-color, #909aa6); --on-surface-rgb: 27, 32, 39; --accent: var(--tg-theme-accent-text-color, var(--tg-theme-link-color, #b8431f)); --accent-rgb: 184, 67, 31; --accent-strong: #97361a; --accent-soft: rgba(184, 67, 31, 0.10); --accent-light: rgba(184, 67, 31, 0.10); /* Loader cosmos — dark navy sky + icy-blue starlight for off-Telegram light users (matches COOL). */ --loader-bg: #0c1a35; --loader-text: #e2ecfa; --loader-text-dim: #97abc8; --loader-accent-rgb: 96, 150, 228; --star-rgb: 208, 226, 255; --star-alt-rgb: 130, 180, 255; --star-glow: rgba(150, 195, 255, 0.85); --star-peak: 1; --meteor-tip-rgb: 236, 244, 255; --button-bg: var(--tg-theme-button-color, #b8431f); --button-text: var(--tg-theme-button-text-color, #ffffff); --success: #3f7d3a; --success-rgb: 63, 125, 58; --warning: #b07415; --warning-rgb: 176, 116, 21; --destructive: #b23b46; --destructive-rgb: 178, 59, 70; --info: #2c6c87; --info-rgb: 44, 108, 135; --srs: #7c3aed; --srs-rgb: 124, 58, 237; --mastered-stable: #0e8d7f; --mastered-stable-rgb: 14, 141, 127; --again: #b23b46; --hard: #b07415; --good: #2c6c87; --easy: #3f7d3a; --word-new-bg: rgba(184, 67, 31, 0.12); --word-new-line: var(--accent); --word-seen-bg: rgba(184, 67, 31, 0.06); --word-learning-line: var(--accent); --word-familiar-line: rgba(184, 67, 31, 0.4); --shadow-1: none; --shadow-2: none; --shadow-3: 0 12px 32px rgba(21, 40, 70, 0.14); --shadow: var(--shadow-2); --paper-texture: none; } } /* ============================================================ NIGHT (data-theme="dark") — observatory cosmos, lamplight gold. Deep blue-black sky, starlight off-white ink, terracotta/Mars accent. ============================================================ */ :root[data-theme="dark"] { --bg: #0b0e15; --bg-secondary: #10131d; --bg-elevated: #1a1f30; --card-bg: #141826; --card-border: rgba(230, 232, 240, 0.12); --card-hover: rgba(230, 232, 240, 0.06); --text: #e6e8f0; --text-secondary: #9298a8; --hint: #5c6373; --on-surface-rgb: 230, 232, 240; --accent: #e07a4e; --accent-rgb: 224, 122, 78; --accent-strong: #ec9069; --accent-soft: rgba(224, 122, 78, 0.16); --accent-light: rgba(224, 122, 78, 0.16); /* Loader cosmos — NIGHT: deep blue-black sky, white starlight, warm terracotta comet. */ --loader-bg: #0b0e15; --loader-text: #e6e8f0; --loader-text-dim: #9298a8; --loader-accent-rgb: 224, 122, 78; --star-rgb: 255, 255, 255; --star-alt-rgb: 130, 185, 250; --star-glow: rgba(180, 210, 255, 0.8); --star-peak: 1; --meteor-tip-rgb: 255, 255, 255; --button-bg: var(--accent); --button-text: #190f08; --success: #9cc77f; --success-rgb: 156, 199, 127; --warning: #e0b25a; --warning-rgb: 224, 178, 90; --destructive: #e08a7f; --destructive-rgb: 224, 138, 127; --info: #7fb6cf; --info-rgb: 127, 182, 207; --srs: #b39bff; --srs-rgb: 179, 155, 255; --mastered-stable: #1ec8b8; --mastered-stable-rgb: 30, 200, 184; --again: #e08a7f; --hard: #e0b25a; --good: #7fb6cf; --easy: #9cc77f; --word-new-bg: rgba(224, 122, 78, 0.16); --word-new-line: var(--accent); --word-new-text: var(--text); --word-seen-bg: rgba(224, 122, 78, 0.09); --word-seen-line: transparent; --word-seen-text: var(--text); --word-learning-bg: transparent; --word-learning-line: var(--accent); --word-learning-text: var(--text); --word-familiar-bg: transparent; --word-familiar-line: rgba(224, 122, 78, 0.4); --word-familiar-text: var(--text); --word-mastered-bg: transparent; --word-mastered-line: transparent; --word-mastered-text: var(--text); --hl-ai-bg: var(--word-new-bg); --hl-ai-border: var(--word-new-line); --hl-user-bg: var(--word-learning-bg); --hl-user-border: var(--word-learning-line); --hl-added: var(--success); --shadow-1: none; --shadow-2: none; --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.6); --shadow: var(--shadow-2); --paper-texture: radial-gradient(1.5px 1.5px at 14% 16%, rgba(255,255,255,.75), transparent 60%), radial-gradient(1px 1px at 32% 9%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1.5px 1.5px at 57% 21%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1px 1px at 88% 29%, rgba(255,255,255,.55), transparent 60%), radial-gradient(1.5px 1.5px at 8% 43%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 45% 51%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 70% 61%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1.5px 1.5px at 22% 72%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 90% 69%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 37% 85%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1px 1px at 64% 92%, rgba(255,255,255,.35), transparent 60%), radial-gradient(170px 170px at 93% 6%, rgba(224,122,78,.11), transparent 70%), radial-gradient(240px 220px at 6% 98%, rgba(120,150,220,.06), transparent 72%); } /* ============================================================ COOL (data-theme="cool") — clean editorial light. Cold paper-white, slate ink, terracotta as the warm counterpoint (NO sapphire). Contrast: ink/bg ≈ 13:1 · accent/bg ≈ 5.9:1 ============================================================ */ :root[data-theme="cool"] { --bg: #eef1f5; --bg-secondary: #e3e8ee; --bg-elevated: #ffffff; --card-bg: #fbfcfe; --card-border: rgba(27, 32, 39, 0.12); --card-hover: #f3f6fa; --text: #1b2027; --text-secondary: #586271; --hint: #909aa6; --on-surface-rgb: 27, 32, 39; --accent: #b8431f; --accent-rgb: 184, 67, 31; --accent-strong: #97361a; --accent-soft: rgba(184, 67, 31, 0.10); --accent-light: rgba(184, 67, 31, 0.10); /* Loader cosmos — COOL: dark navy sky, icy-blue starlight + blue comet (the loader stays a dark sky even on this light editorial theme). */ --loader-bg: #0c1a35; --loader-text: #e2ecfa; --loader-text-dim: #97abc8; --loader-accent-rgb: 96, 150, 228; --star-rgb: 208, 226, 255; --star-alt-rgb: 130, 180, 255; --star-glow: rgba(150, 195, 255, 0.85); --star-peak: 1; --meteor-tip-rgb: 236, 244, 255; --button-bg: var(--accent); --button-text: #ffffff; --success: #3f7d3a; --success-rgb: 63, 125, 58; --warning: #b07415; --warning-rgb: 176, 116, 21; --destructive: #b23b46; --destructive-rgb: 178, 59, 70; --info: #2c6c87; --info-rgb: 44, 108, 135; --srs: #7c3aed; --srs-rgb: 124, 58, 237; --mastered-stable: #0e8d7f; --mastered-stable-rgb: 14, 141, 127; --again: #b23b46; --hard: #b07415; --good: #2c6c87; --easy: #3f7d3a; --word-new-bg: rgba(184, 67, 31, 0.12); --word-new-line: var(--accent); --word-new-text: var(--text); --word-seen-bg: rgba(184, 67, 31, 0.06); --word-seen-line: transparent; --word-seen-text: var(--text); --word-learning-bg: transparent; --word-learning-line: var(--accent); --word-learning-text: var(--text); --word-familiar-bg: transparent; --word-familiar-line: rgba(184, 67, 31, 0.4); --word-familiar-text: var(--text); --word-mastered-bg: transparent; --word-mastered-line: transparent; --word-mastered-text: var(--text); --hl-ai-bg: var(--word-new-bg); --hl-ai-border: var(--word-new-line); --hl-user-bg: var(--word-learning-bg); --hl-user-border: var(--word-learning-line); --hl-added: var(--success); --shadow-1: none; --shadow-2: none; --shadow-3: 0 12px 32px rgba(21, 40, 70, 0.14); --shadow: var(--shadow-2); --paper-texture: none; } /* ============================================================ PAPER (data-theme="sepia") — warm book stock. Dune-sand surface, deep-umber ink, spice-rust accent, sun-wash + faint ruled-manuscript texture. Serif reading body. Contrast: ink/bg ≈ 10:1 · accent/bg ≈ 5.2:1 ============================================================ */ :root[data-theme="sepia"] { --bg: #e7d9bd; --bg-secondary: #ddccaa; --bg-elevated: #f2e8d1; --card-bg: #f2e8d1; --card-border: rgba(42, 32, 18, 0.17); --card-hover: #ede0c4; --text: #2a2012; --text-secondary: #6d5b41; --hint: #9a896a; --on-surface-rgb: 42, 32, 18; --accent: #b3401a; --accent-rgb: 179, 64, 26; --accent-strong: #8f3315; --accent-soft: rgba(179, 64, 26, 0.10); --accent-light: rgba(179, 64, 26, 0.10); /* Loader cosmos — PAPER: warm dusk sky (deep umber), cream/gold starlight + amber comet. */ --loader-bg: #3a2c18; --loader-text: #f6ecd6; --loader-text-dim: #cbb38d; --loader-accent-rgb: 224, 168, 86; --star-rgb: 247, 233, 198; --star-alt-rgb: 236, 200, 130; --star-glow: rgba(247, 216, 156, 0.8); --star-peak: 1; --meteor-tip-rgb: 255, 242, 212; --button-bg: var(--accent); --button-text: #fbf3e1; --success: #5f7d2a; --success-rgb: 95, 125, 42; --warning: #b07415; --warning-rgb: 176, 116, 21; --destructive: #a8392a; --destructive-rgb: 168, 57, 42; --info: #2c6c87; --info-rgb: 44, 108, 135; --srs: #6b3aa6; --srs-rgb: 107, 58, 166; --mastered-stable: #2c8576; --mastered-stable-rgb: 44, 133, 118; --again: #a8392a; --hard: #b07415; --good: #2c6c87; --easy: #5f7d2a; --word-new-bg: rgba(179, 64, 26, 0.14); --word-new-line: var(--accent); --word-new-text: var(--text); --word-seen-bg: rgba(179, 64, 26, 0.07); --word-seen-line: transparent; --word-seen-text: var(--text); --word-learning-bg: transparent; --word-learning-line: var(--accent); --word-learning-text: var(--text); --word-familiar-bg: transparent; --word-familiar-line: rgba(179, 64, 26, 0.4); --word-familiar-text: var(--text); --word-mastered-bg: transparent; --word-mastered-line: transparent; --word-mastered-text: var(--text); --hl-ai-bg: var(--word-new-bg); --hl-ai-border: var(--word-new-line); --hl-user-bg: var(--word-learning-bg); --hl-user-border: var(--word-learning-line); --hl-added: var(--success); --shadow-1: none; --shadow-2: none; --shadow-3: 0 12px 32px rgba(90, 60, 25, 0.18); --shadow: var(--shadow-2); /* Warm sun-wash over the dune + faint ruled manuscript stock. */ --paper-texture: radial-gradient(135% 80% at 50% -12%, rgba(214, 150, 66, 0.13), transparent 62%), repeating-linear-gradient(0deg, transparent, transparent 33px, rgba(42, 32, 18, 0.028) 33px, rgba(42, 32, 18, 0.028) 34px); } /* ============================================================ Type utility classes — apply directly to elements. Display + title tiers render in the editorial serif (--font-display); body / caption / reading set their own family. Caption is tracked + uppercase (eyebrow feel) but stays in the UI sans. ============================================================ */ .lw-type-display { font-family: var(--font-display); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-track); } .lw-type-title-l { font-family: var(--font-display); font-size: var(--type-title-l-size); line-height: var(--type-title-l-line); font-weight: var(--type-title-l-weight); letter-spacing: var(--type-title-l-track); } .lw-type-title-m { font-family: var(--font-display); font-size: var(--type-title-m-size); line-height: var(--type-title-m-line); font-weight: var(--type-title-m-weight); letter-spacing: var(--type-title-m-track); } .lw-type-title-s { font-family: var(--font-display); font-size: var(--type-title-s-size); line-height: var(--type-title-s-line); font-weight: var(--type-title-s-weight); letter-spacing: var(--type-title-s-track); } .lw-type-body-l { font-size: var(--type-body-l-size); line-height: var(--type-body-l-line); font-weight: var(--type-body-l-weight); letter-spacing: var(--type-body-l-track); } .lw-type-body { font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight); letter-spacing: var(--type-body-track); } .lw-type-body-s { font-size: var(--type-body-s-size); line-height: var(--type-body-s-line); font-weight: var(--type-body-s-weight); letter-spacing: var(--type-body-s-track); } .lw-type-caption { font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-track); text-transform: uppercase; } .lw-type-reading { font-size: var(--type-reading-size); line-height: var(--type-reading-line); font-weight: var(--type-reading-weight); letter-spacing: var(--type-reading-track); font-family: var(--font-reading); } /* ============================================================ Content-width containers — center + cap by content tier. Add to a page's top-level wrapper. Because these are max-widths, phones (viewport < cap) render full-width; the column only centers once the screen is wider than the cap. See the --w-* tokens above. */ .lw-container-readable { width: 100%; max-width: var(--w-readable); margin-inline: auto; } .lw-container-wide { width: 100%; max-width: var(--w-wide); margin-inline: auto; }