/* * ════════════════════════════════════════════════════════════════════════ * variables.css * ════════════════════════════════════════════════════════════════════════ * * 01. Design tokens – CSS custom properties: colour palette, shadows, * and typography stacks defined on :root * 02. Font-size base – html font-size: the single rem scale lever * * NOTE: No dark-mode overrides live here. The --dm-* tokens are defined * in :root (they are just custom properties, not overrides), so they * belong here. Actual body.dark-mode rule overrides live at the bottom * of each relevant sub-file. * * MULTILINGUAL NOTE: Per-script font-family overrides (:lang() rules) * are NOT defined here. They live in 01-fonts.css section 04, which is * the canonical reference for all multilingual typography decisions. * The font stacks below are used for Latin-script languages only; the * :lang() rules in 01-fonts.css override --main-font-family at the * element level for Arabic, Urdu, Hebrew, Devanagari, Myanmar, CJK, * and Hangul scripts automatically when is set by JS. * * ════════════════════════════════════════════════════════════════════════ */ /* ── 01. DESIGN TOKENS ────────────────────────────────────────────────── All colours and the shadow value are defined here. Use these variables everywhere; avoid hardcoding colour values in rules below. The parchment/ink palette gives the 'aged document' aesthetic. Rust = danger / highlight; sage = success / save; gold = accent. --card-bg is used wherever a component surface was previously 'white', so dark-mode overrides can target a single token rather than hunting every background: white declaration individually. ─────────────────────────────────────────────────────────────────────── */ :root { /* ── Light-mode colour palette ── */ --surface: #f0ece4; /* lightest background / input fill */ --surface-mid: #e4ddd2; /* page background and dividers */ --text: #1c1710; /* near-black — warm, almost sepia */ --text-secondary: #4a3f30; /* body text, secondary headings */ --text-faint: #8c7d68; /* placeholders, captions, meta */ --emphasis: #6b3e1a; /* labels, warnings, emphasis */ --emphasis-light: #9c5c2a; /* dark-mode emphasis alternative */ --success: #3d5c2a; /* success states, Save button */ --accent: #8c6420; /* primary accent (stars, borders) */ --accent-light: #b8882e; /* hover / lighter accent */ --border: #c8bca8; /* card borders, dividers */ --shadow: rgba(28,23,16,0.13); /* unified shadow tint */ --card-bg: #ffffff; /* card / block surface colour */ --input-focus-bg: color-mix(in srgb, var(--card-bg) 85%, var(--surface)); /* answer field focus background blends towards --surface; override per study theme */ --validate: #2a6b7c; /* local validate: answer check */ /* ── Dark-mode colour tokens ── These are plain custom properties, not overrides — they live here so every file can reference them. Actual body.dark-mode rules that apply these tokens are collected at the bottom of each sub-file. */ --dm-base: #0f0c09; /* deepest background: headers, overlays, QA card */ --dm-surface: #1a1510; /* page / body background */ --dm-raised: #2a2218; /* card / block surface (raised one level) */ --dm-sunken: #1f1a14; /* answer fields, starred bg, inset surfaces */ --dm-border: #3a3028; /* all borders, dividers, separators */ --dm-text: #e8e0d0; /* primary text on dark backgrounds */ --dm-text-mid: #c8bfaf; /* secondary / body text, paragraph copy */ --dm-text-faint: #6a5f50; /* placeholders, disabled, faint labels */ /* ── Stacking layers ── Named z-index tokens. Every z-index in the codebase must reference one of these tokens — no magic numbers. The calc() pattern at usage sites (e.g. calc(var(--z-subnav) - 1)) is permitted where a layer must sit immediately below a named tier without needing its own token. Layers in ascending order: */ --z-subnav: 50; /* sticky page sub-headers (howto, progress, library) */ --z-search: 95; /* slide-down search panel and hamburger drawer */ --z-nav: 100; /* fixed top nav */ --z-tooltip: 200; /* floating tooltips and hint popovers */ --z-modal: 300; /* content overlays: verse, QA, deeper-dive, info */ --z-onboarding: 400; /* onboarding overlay — above all content modals */ --z-dialog: 500; /* system dialogs: Settings/Library confirm actions */ --z-toast: 600; /* toast and celebration notifications — always on top */ /* ── Typography stacks ── These stacks cover Latin-script languages (en, fr, es, pt, ha, ff, sw, ig, yo, ms, tl, ru, uk, el) and are the active fonts whenever no :lang() override applies. For non-Latin scripts the browser falls through the stack to Georgia or system-ui, which is acceptable as a last resort but not ideal. The :lang() rules in 01-fonts.css section 04 override font-family before the fallback is reached, ensuring each script gets a purpose-built Noto font. These stacks are therefore only exercised by Latin-script and Cyrillic/Greek languages (which Inter and Source Serif 4 both cover well). --font-stack-heading (Playfair Display) is a Latin-only display font. The :lang() overrides in 01-fonts.css replace it with the active body font for any language whose script Playfair does not cover, so headings in Arabic, Devanagari, CJK, etc. render correctly rather than falling through to Georgia / Times New Roman. */ --font-stack-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* body text — serif mode */ --font-stack-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* body text — sans mode */ /* --main-font-family is the active body font. It defaults to sans here but is switched at runtime by applyAllSettings() in response to the user's font preference stored in localStorage. Do not hardcode a font-family on body — always use this token. :lang() rules in 01-fonts.css override this token at the element level for non-Latin scripts, so both the serif and sans user preference and the correct script font are respected simultaneously. */ --main-font-family: var(--font-stack-sans); --font-stack-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; /* display headings — Latin only; see note above */ --font-stack-mono: 'DM Mono', 'Courier New', Courier, monospace; /* labels, UI chrome — Latin/Cyrillic/Greek only */ /* ── Setting the margins for content panels ── */ --content-margin: 4px; /* tweak this one value to adjust all panels */ } /* ── 02. FONT-SIZE BASE ───────────────────────────────────────────────── html font-size is the single lever the Settings page adjusts via JS. All reading text uses rem so it scales automatically with it. UI chrome (nav, labels, eyebrows, monospace elements) stays in px so it remains stable regardless of the user's reading-size preference. ─────────────────────────────────────────────────────────────────────── */ html { font-size: 16px; }