/* ========================================================================== Wandernote — Design Tokens Aesthetic: "Frieren meets LOTR, no characters" — misty valleys, mossy stone, candlelit studies, parchment, firefly dusk. Melancholy-but-warm, painterly. Two themes: :root = Daylight (warm parchment, ink-brown text) html[data-theme="hearthlight"] = Hearthlight (deep indigo, warm cream text) JS sets document.documentElement.dataset.theme = "hearthlight". FONTS: linked from the HTML files via to Google Fonts (not @import here, so the stylesheet still loads from file:// without a network round-trip blocking render). This file only references the families with local fallback stacks, so a fully offline page degrades to Georgia / system-ui gracefully: display "Cormorant Garamond", Georgia, "Times New Roman", serif body "Source Serif 4", Georgia, serif ui "Inter", system-ui, sans-serif ========================================================================== ------------------------------------------------------------------ CONTRAST AUDIT (WCAG 2.1 relative luminance; all text tiers >= 4.5:1) Computed for every text tier on every surface, both themes. DAYLIGHT --bg --bg-raised --bg-sunken --ink 11.69 12.77 10.09 --ink-soft 7.06 7.71 6.09 --ink-faint 5.76 6.29 4.97 --accent (link) 4.64 5.07 4.01* (*3:1 UI min met) --moss 5.83 6.37 5.03 --dusk 4.96 5.42 4.28 --danger 6.06 6.61 — (--danger-soft tint over bg/ bg-raised: 4.92 / 5.35) HEARTHLIGHT --bg --bg-raised --bg-sunken --ink 13.15 11.21 14.28 --ink-soft 8.55 7.28 9.28 --ink-faint 5.45 4.65 5.92 --accent 8.82 7.52 9.58 --moss 5.16 4.40* 5.61 (*decorative, >3:1) --dusk 5.88 5.01 6.39 --danger 7.18 6.11 — (--danger-soft tint over bg/ bg-raised: 5.62 / 4.78) The three TEXT TIERS (--ink / --ink-soft / --ink-faint) clear 4.5:1 on all three surfaces in both themes. --accent clears 4.5:1 on primary surfaces (link/body use) and the 3:1 non-text minimum on sunken (focus rings, icons). --danger (destructive-action text/icon) clears 4.5:1 on --bg and --bg-raised in both themes, AND clears 4.5:1 when read against --danger-soft (its own translucent hover tint) composited over each of those surfaces — the worst-case pairing for a "danger row" hover state. Never pure black on parchment, never pure white on indigo. TAG SWATCHES (chip fill; chip TEXT is --ink; swatches are OPAQUE so the "swatch-over-bg composite" is just the solid — no compositing to worst-case). Ratio = --ink of that theme vs the solid swatch. All clear 4.5:1 both themes. DAYLIGHT (--ink #33281B) HEARTHLIGHT (--ink #ECE3D0) --tag-amber 9.01 5.69 --tag-sage 8.88 7.05 --tag-moss 7.35 9.08 --tag-dusk 7.57 7.83 --tag-rust 7.78 8.58 --tag-violet 7.90 8.54 --tag-teal 8.28 8.08 --tag-plum 7.70 9.55 Daylight swatches are light dusty tints (dark ink reads on them); Hearthlight swatches are the same hues taken deep (cream ink reads on them). Worst case is Hearthlight --tag-amber at 5.69:1 — still comfortably over the 4.5:1 bar. ------------------------------------------------------------------ */ /* ========================================================================== DAYLIGHT (default) ========================================================================== */ :root { /* Surfaces — parchment, warm paper stacked light-over-dark */ --bg: #EFE7D6; /* main parchment field */ --bg-raised: #F7F1E3; /* cards / panels lifted toward the light */ --bg-sunken: #E3D7BF; /* wells, insets, list gutters */ --bg-veil: rgba(38, 30, 20, 0.44); /* translucent overlay backdrop */ /* Text tiers — ink-brown, never pure black */ --ink: #33281B; /* primary body + headings */ --ink-soft: #57493A; /* secondary text, labels */ --ink-faint: #655643; /* muted meta, timestamps, placeholders */ /* Accent — warm amber / candlelight */ --accent: #985613; /* links, focus, key marks */ --accent-soft: #C88A3E; /* softer amber for tints */ --accent-glow: rgba(200, 138, 62, 0.30); /* lantern light */ /* Danger — muted rust/ember, destructive actions only (trash, delete-forever) */ --danger: #8E3C22; /* destructive text/icon; 6.06:1 on --bg, 6.61:1 on --bg-raised (audit above) */ --danger-soft: rgba(142, 60, 34, 0.14); /* translucent hover tint; --danger over this tint stays >=4.5:1 on both surfaces (audit above) */ /* Supporting scenery — greens + dusk blue */ --sage: #6E7E5B; /* pale moss-green, decorative */ --moss: #4E5C40; /* deep moss; text-safe EXCEPT on bg-raised in hearthlight (4.40:1) — decorative-only there */ --dusk: #54637A; /* dusty valley blue */ /* Tag swatches — OPAQUE chip fills (not translucent, so "swatch-over-bg composite" == the solid itself; worst-case contrast is the value below). Chip text is --ink. Daylight takes each hue LIGHT/dusty so dark --ink reads on it. Muted, parchment-compatible pigments — faded ink, never neon. rust/violet/teal/plum are the round-2 additions. Contrast audited below. */ --tag-amber: #E8C98A; /* --ink 9.01:1 */ --tag-sage: #C6CFB2; /* --ink 8.88:1 */ --tag-moss: #A9C193; /* --ink 7.35:1 */ --tag-dusk: #AEBDD6; /* --ink 7.57:1 */ --tag-rust: #E6B49B; /* --ink 7.78:1 */ --tag-violet: #CBB9DE; /* --ink 7.90:1 */ --tag-teal: #A3CDC4; /* --ink 8.28:1 */ --tag-plum: #DBB2CB; /* --ink 7.70:1 */ /* Hairline borders — derived from ink so they sit in the same family */ --line: rgba(51, 40, 27, 0.16); --line-soft: rgba(51, 40, 27, 0.09); /* Elevation — shadows tinted to the warm background hue, no pure black */ --shadow-soft: 0 1px 2px rgba(60, 45, 28, 0.08), 0 2px 6px rgba(60, 45, 28, 0.06); --shadow-lift: 0 4px 12px rgba(60, 45, 28, 0.10), 0 14px 34px rgba(60, 45, 28, 0.13); --glow-lantern: 0 0 0 1px var(--accent-glow), 0 0 22px rgba(200, 138, 62, 0.26); /* Corner radii */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; /* Type families (linked from HTML; local fallbacks for offline file://) */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Source Serif 4", Georgia, serif; --font-ui: "Inter", system-ui, -apple-system, Segoe UI, sans-serif; /* Spacing scale — 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Motion */ --dur-quick: 180ms; --dur-slow: 480ms; --ease-soft: cubic-bezier(.22, .61, .36, 1); /* Global reduced-motion kill switch — other files gate motion on this (e.g. transform: translateY(calc(var(--motion-ok) * 12px))). */ --motion-ok: 1; color-scheme: light; } /* ========================================================================== HEARTHLIGHT (dark) Deep indigo surfaces (never pure black), warm cream text (never pure white), firefly-gold / candle-amber accents. ========================================================================== */ html[data-theme="hearthlight"] { --bg: #191D2B; /* deep indigo dusk */ --bg-raised: #242A3B; /* lifted panels */ --bg-sunken: #12151F; /* wells, insets */ --bg-veil: rgba(6, 8, 14, 0.58); --ink: #ECE3D0; /* warm cream, not pure white */ --ink-soft: #C3B8A2; --ink-faint: #9C927E; --accent: #E6B45C; /* firefly gold */ --accent-soft: #F0CE93; --accent-glow: rgba(230, 180, 92, 0.34); --danger: #E89574; /* warm ember-coral; 7.18:1 on --bg, 6.11:1 on --bg-raised */ --danger-soft: rgba(232, 149, 116, 0.14); /* hover tint; --danger over it stays >=4.5:1 on both surfaces */ --sage: #93A17E; --moss: #849473; --dusk: #8A9AB4; /* Tag swatches — same eight hues taken DEEP instead of light, so the cream --ink reads on them. Opaque; contrast audited below (all >= 5.6:1). */ --tag-amber: #6E5223; /* --ink 5.69:1 */ --tag-sage: #414D34; /* --ink 7.05:1 */ --tag-moss: #2E3D27; /* --ink 9.08:1 */ --tag-dusk: #374357; /* --ink 7.83:1 */ --tag-rust: #5E3020; /* --ink 8.58:1 */ --tag-violet: #413662; /* --ink 8.54:1 */ --tag-teal: #204740; /* --ink 8.08:1 */ --tag-plum: #4E2A3E; /* --ink 9.55:1 */ --line: rgba(236, 227, 208, 0.14); --line-soft: rgba(236, 227, 208, 0.08); --shadow-soft: 0 1px 2px rgba(4, 6, 12, 0.34), 0 2px 8px rgba(4, 6, 12, 0.30); --shadow-lift: 0 6px 18px rgba(4, 6, 12, 0.44), 0 16px 40px rgba(4, 6, 12, 0.52); --glow-lantern: 0 0 0 1px var(--accent-glow), 0 0 28px rgba(230, 180, 92, 0.32); color-scheme: dark; } /* ========================================================================== Base element styles ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background-color: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; /* 17px — comfortable serif reading size */ line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: 0.01em; color: var(--ink); } a { color: var(--accent); text-decoration-color: var(--line); text-underline-offset: 0.18em; } /* Keyboard focus only — a warm amber ring, offset off the glyph */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--accent-glow); color: var(--ink); } /* ========================================================================== Utility classes ========================================================================== */ /* .texture-paper — a barely-there fractal-noise grain layered over a surface, painted on a fixed-shape, pointer-events-none pseudo-element so it never costs repaints on scroll. Grain is grayscale (saturate 0) so it reads on both parchment and indigo. */ .texture-paper { position: relative; isolation: isolate; } .texture-paper::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 140px 140px; } /* .hairline — a thin top rule in the hairline-border family */ .hairline { border-top: 1px solid var(--line); } /* .visually-hidden — content for assistive tech only */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== Smooth theme transition Guarded so it never fires on first paint: JS adds .theme-ready to after the initial render, so the daylight->hearthlight swap eases while the very first paint snaps in at whatever theme was set. Scoped to the page backdrop + text so it stays cheap and never stomps component-level transitions (hovers, presses) on their own properties. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { html.theme-ready, html.theme-ready body { transition: background-color var(--dur-slow) var(--ease-soft), color var(--dur-slow) var(--ease-soft); } } /* ========================================================================== Reduced motion — global kill switch + neutralise any lingering transitions ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion-ok: 0; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }