/* ============================================================================= Lysia — token system. ONE theme, two modes. Unified 2026-06-24: the old "garden" and "risograph" identities were collapsed into a single shipped identity (the grove × editorial look), in two first-class modes: · [data-mode] light | dark — the only visual switch. [data-theme] / [data-text] are retired; no switcher. (Backend may still store a vestigial "theme" string; it is ignored. More themes can be added later by reintroducing a [data-theme] override layer.) Palette: warm first-light paper + bark ink + an academic azure-cobalt accent (deliberately NOT the over-used SaaS purple/blue). Status inks: sage = shown, gold = in progress, crimson = risk. Soft radii, diffuse light (no hard riso offset), quiet grain. OKLCH throughout; AA-verified by themes.contract.mjs. Fonts: Newsreader (display serif — italics carry voice), Inter (body/UI), JetBrains Mono (data voice: tiny, letterspaced, uppercase). ========================================================================== */ /* ----- 1. Invariant ------------------------------------------------------- */ :root { --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-backdrop: 1200; --z-modal: 1300; --z-toast: 1400; --z-tooltip: 1500; --z-loader: 1600; /* spacing ramp — scaled by the density knob */ --sp-1: calc(0.25rem * var(--density)); --sp-2: calc(0.5rem * var(--density)); --sp-3: calc(0.75rem * var(--density)); --sp-4: calc(1rem * var(--density)); --sp-5: calc(1.5rem * var(--density)); --sp-6: calc(2rem * var(--density)); --sp-7: calc(3rem * var(--density)); --measure: 66ch; /* fixed product type scale (~1.2); --text-base >=1rem for WCAG readability */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.95rem; --text-3xl: 2.6rem; --lead-tight: 1.18; --lead-normal: 1.55; --lead-relaxed: 1.7; /* schedule geometry — hour-row height scaled by density */ --hour-h: calc(66px * var(--density)); /* ---- typography ---- */ --font-head: "Newsreader", Georgia, "Iowan Old Style", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* legacy aliases the component CSS still references */ --font-sans: var(--font-body); --font-display: var(--font-head); --font-mono: var(--font-data); --font-page-heading: var(--font-head); --w-normal: 400; --w-medium: 500; --w-bold: 600; --track: -0.011em; --track-tight: -0.02em; /* ---- shape: soft radii (6 / 10 / 14) ---------------------------------- */ --r1: calc(6px * var(--radius-scale)); --r2: calc(10px * var(--radius-scale)); --r3: calc(14px * var(--radius-scale)); --r-sm: var(--r1); --r-md: var(--r2); --r-lg: var(--r3); --control-h: calc(34px * var(--density)); --dur-fast: 110ms; --dur-normal: 200ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---- texture knobs (quiet grain, no misregistration) ------------------- */ --grain: 0.025; --misreg: 0px; /* ---- live tweak knobs (defaults) -------------------------------------- */ --density: 1; --radius-scale: 1; --block-opacity: 1; --block-sat: 1; /* Plan spine knobs (permanently calm) */ --heat: 0; --spine-grow: 0; } /* ============================================================================= COLOR — one identity, two modes. ========================================================================== */ /* ---- LIGHT: first-light paper + bark ink + azure accent (the default) ---- */ [data-mode="light"] { --bg: oklch(92.9% 0.008 114); /* cool neutral paper #e7e8e2 */ --surface: oklch(95.9% 0.005 118); /* card #f1f2ee */ --surface-raised:oklch(98.1% 0.004 122); /* #f8f9f6 */ --ink: oklch(30.1% 0.024 239); /* cool slate #233039 */ --ink-muted: oklch(41.8% 0.027 238); /* #3f4f5a — AA on paper */ --ink-subtle: oklch(54.1% 0.020 235); /* #647179 */ --border: oklch(86.1% 0.008 122); /* hairline #d0d2cc */ --border-strong: oklch(76.5% 0.010 126); /* #b1b4ad */ --accent: oklch(51.8% 0.099 243); /* steel-azure #2c6e9c */ --accent-hover: oklch(43.7% 0.077 239); /* #225777 */ --accent-ink: oklch(97.6% 0.008 242); /* #f3f8fc */ --focus-ring: oklch(51.8% 0.099 243); --block-ink: oklch(30.1% 0.024 239); --done: oklch(59.5% 0.058 162); /* sage #5f8a74 — shown */ --missed: oklch(50.0% 0.130 33); /* rust (AA-darkened from #b05a44) — risk */ --exam: oklch(65.3% 0.103 83); /* gold #ae8a3f — in progress */ --slate: oklch(51.1% 0.039 228); /* secondary slate-blue #4f6b78 */ --backdrop-op: 1; /* fixed watercolor full strength */ --bg-img-op: 0; /* in-app ambient image opacity — flat cream shell to match the mockup exactly; the botanical voice lives in per-screen specimens (trees/sprigs), not a full-bleed forest */ --overlay: oklch(25% 0.020 239 / 0.40); /* course inks — paper-hued six */ --cc: var(--block-sat); --course-1: oklch(52% calc(0.10 * var(--cc)) 255); --course-2: oklch(54% calc(0.12 * var(--cc)) 305); --course-3: oklch(63% calc(0.09 * var(--cc)) 20); --course-4: oklch(66% calc(0.11 * var(--cc)) 85); --course-5: oklch(58% calc(0.08 * var(--cc)) 176); --course-6: oklch(54% calc(0.13 * var(--cc)) 29); color-scheme: light; } /* ---- DARK: dusk soil + linen ink + brighter azure ------------------------ */ [data-mode="dark"] { --bg: oklch(22.6% 0.014 239); /* deep slate-navy #161d22 */ --surface: oklch(27.5% 0.019 239); /* #1f2930 */ --surface-raised:oklch(31.3% 0.020 234); /* #27333a */ --ink: oklch(91.8% 0.010 239); /* cool linen #dee5ea */ --ink-muted: oklch(73.1% 0.024 234); /* #9aabb5 */ --ink-subtle: oklch(60.4% 0.024 235); /* #74848e */ --border: oklch(33.3% 0.020 234); /* #2c383f */ --border-strong: oklch(43.0% 0.023 236); /* #44525b */ --accent: oklch(69.9% 0.099 241); /* bright azure #62a6d6 */ --accent-hover: oklch(75.8% 0.084 241); /* #7fb8e1 */ --accent-ink: oklch(20.0% 0.015 240); /* #10171c */ --focus-ring: oklch(69.9% 0.099 241); --block-ink: oklch(91.8% 0.010 239); --done: oklch(67.5% 0.058 140); /* sage #84a07e */ --missed: oklch(65.8% 0.107 40); /* rust #c97a5f */ --exam: oklch(73.1% 0.102 78); /* gold #cba05a */ --slate: oklch(69.2% 0.030 229); /* secondary slate #8aa0ab */ --backdrop-op: 0.42; /* dim watercolor so dark reads dark */ --bg-img-op: 0.09; /* in-app ambient image opacity */ --overlay: oklch(13% 0.020 239 / 0.55); --cc: var(--block-sat); --course-1: oklch(68% calc(0.09 * var(--cc)) 255); --course-2: oklch(72% calc(0.10 * var(--cc)) 305); --course-3: oklch(74% calc(0.08 * var(--cc)) 20); --course-4: oklch(78% calc(0.10 * var(--cc)) 86); --course-5: oklch(76% calc(0.08 * var(--cc)) 174); --course-6: oklch(69% calc(0.11 * var(--cc)) 30); color-scheme: dark; } /* course aliases (used directly by some markup) */ :root { --c-blue: var(--course-1); --c-magenta: var(--course-2); --c-pink: var(--course-3); --c-amber: var(--course-4); --c-teal: var(--course-5); --c-red: var(--course-6); } /* ----- 4. Derived (resolves per active mode) ------------------------------ */ :root { --accent-soft: color-mix(in oklch, var(--accent) 11%, transparent); --accent-quiet: color-mix(in oklch, var(--accent) 12%, var(--surface)); --hover-bg: color-mix(in oklch, var(--ink) 5%, var(--surface)); --active-bg: color-mix(in oklch, var(--ink) 10%, var(--surface)); --selected-bg: var(--accent-quiet); --missed-bg: color-mix(in oklch, var(--missed) 14%, var(--surface)); --exam-bg: color-mix(in oklch, var(--exam) 16%, var(--surface)); --done-bg: color-mix(in oklch, var(--done) 14%, var(--surface)); --error-ink: var(--missed); --success-ink: var(--done); --warning-ink: var(--exam); /* soft diffuse light — no hard offset ghost */ --shadow-offset: 0 1px 2px color-mix(in oklch, var(--ink) 6%, transparent); --shadow-1: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent); --shadow-2: 0 1px 2px color-mix(in oklch, var(--ink) 5%, transparent), 0 6px 18px color-mix(in oklch, var(--ink) 6%, transparent); --shadow-3: 0 2px 6px color-mix(in oklch, var(--ink) 6%, transparent), 0 18px 48px color-mix(in oklch, var(--ink) 10%, transparent); /* translucent surface plate (glass chrome) */ --plate: color-mix(in oklch, var(--surface) 82%, transparent); } [data-mode="dark"] { --shadow-1: 0 1px 2px oklch(12% 0.03 239 / 0.45); --shadow-2: 0 1px 2px oklch(12% 0.03 239 / 0.45), 0 8px 24px oklch(12% 0.04 239 / 0.5); --shadow-3: 0 2px 6px oklch(11% 0.035 239 / 0.5), 0 20px 56px oklch(10% 0.05 239 / 0.62); } /* per-course block fill: course ink mixed toward bg by the opacity knob */ .is-c1 { --block-bg: color-mix(in oklch, var(--course-1) calc(var(--block-opacity)*22%), var(--surface)); --block-edge: var(--course-1); } .is-c2 { --block-bg: color-mix(in oklch, var(--course-2) calc(var(--block-opacity)*22%), var(--surface)); --block-edge: var(--course-2); } .is-c3 { --block-bg: color-mix(in oklch, var(--course-3) calc(var(--block-opacity)*22%), var(--surface)); --block-edge: var(--course-3); } .is-c4 { --block-bg: color-mix(in oklch, var(--course-4) calc(var(--block-opacity)*22%), var(--surface)); --block-edge: var(--course-4); } .is-c5 { --block-bg: color-mix(in oklch, var(--course-5) calc(var(--block-opacity)*22%), var(--surface)); --block-edge: var(--course-5); } .is-c6 { --block-bg: color-mix(in oklch, var(--course-6) calc(var(--block-opacity)*22%), var(--surface)); --block-edge: var(--course-6); } /* ----- 6. Texture chrome -------------------------------------------------- */ /* quiet paper grain — fixed, compositor-friendly, pointer-events:none. */ body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-tooltip); pointer-events: none; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } @media (prefers-reduced-motion: no-preference) { body, .surface, .block, .review-card, .timer, .task, .pri-card, .course-item, .gen-row, input, select, textarea, button, .tab, .theme-card { transition: background-color var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out); } }