/* ============================================================================ Lucy — universal theming system. Two axes on : data-palette (which palette) x data-mode (light|dark|auto). Every component reads ONLY the semantic tokens below — re-theming touches no component CSS. Light/dark resolve via the CSS light-dark() function + color-scheme. Shared by index.html (PIN gate) and app.html. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Hanken+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root{ /* ---- type ---- */ --f-display:'Fraunces',Georgia,'Times New Roman',serif; --f-ui:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-mono:'IBM Plex Mono','SF Mono','Courier New',monospace; --t-display:clamp(28px,4.5vw,40px); --t-h1:clamp(22px,3.2vw,28px); --t-h2:20px; --t-h3:17px; --t-body:16px; --t-ui:14.5px; --t-sm:13px; --t-mono:12.5px; --lh-tight:1.2; --lh-body:1.55; --lh-data:1.3; --measure:66ch; /* ---- spacing (4/8 grid) + radius ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --gutter:clamp(16px,3vw,32px); --r-1:7px; --r-2:11px; --r-3:16px; --r-pill:999px; /* ---- derived tokens (alpha-composed from the per-palette base) ---- */ --line-hi: color-mix(in srgb, var(--acc) 50%, transparent); --acc-dim: color-mix(in srgb, var(--acc) 16%, transparent); --acc-glow:color-mix(in srgb, var(--acc) 8%, transparent); --good-dim:color-mix(in srgb, var(--good) 16%, transparent); --warn-dim:color-mix(in srgb, var(--warn) 16%, transparent); --over-dim:color-mix(in srgb, var(--over) 16%, transparent); --clin-dim:color-mix(in srgb, var(--clin) 16%, transparent); --today: var(--acc); --ring: var(--acc); } /* ---- mode control ---- */ html, html[data-mode="auto"]{ color-scheme: light dark; } html[data-mode="light"]{ color-scheme: light; } html[data-mode="dark"] { color-scheme: dark; } /* =========================================================================== PALETTES — base tokens as light-dark(LIGHT, DARK). Default = Lamplight. warn/over/clin are status accents (single value unless contrast needs both). =========================================================================== */ /* 1 — Lamplight (signature; warm honey, dark-primary) */ html, html[data-palette="lamplight"]{ --bg:light-dark(#f3eee3,#14120e); --surf:light-dark(#fbf8f1,#201d16); --surf-2:light-dark(#f1ead9,#2a2620); --line:light-dark(#e3ddce,#322d24); --ink:light-dark(#221f18,#f1ece0); --ink-soft:light-dark(#4a4538,#cdc6b6); --muted:light-dark(#6b6457,#978f7e); --acc:light-dark(#8a5a12,#e0a23f); --acc-ink:light-dark(#fffaf0,#1a160d); --sec:light-dark(#3a7a4a,#8db98f); --good:light-dark(#3a7a4a,#8db98f); --warn:#d8a657; --over:#d97a5b; --clin:#7fa9c4; } /* 2 — Daylight (clean clinical light; teal) */ html[data-palette="daylight"]{ --bg:light-dark(#f6f7f8,#10171b); --surf:light-dark(#ffffff,#18222a); --surf-2:light-dark(#eef1f3,#213039); --line:light-dark(#e1e6ea,#283742); --ink:light-dark(#1b2227,#eaf1f4); --ink-soft:light-dark(#44515a,#b9c8d0); --muted:light-dark(#6c7882,#7e8f99); --acc:light-dark(#157070,#34b3b3); --acc-ink:light-dark(#ffffff,#06201f); --sec:light-dark(#4a8f6b,#5fb98e); --good:light-dark(#4a8f6b,#5fb98e); --warn:#c98a2e; --over:#cf6a52; --clin:#3f8fb5; } /* 3 — Midnight (deep-focus indigo; dark-ONLY) */ html[data-palette="midnight"]{ color-scheme: dark; --bg:#0b0d10; --surf:#14171c; --surf-2:#1d222a; --line:#232932; --ink:#e7e9ee; --ink-soft:#b0b6c0; --muted:#767d89; --acc:#8b9cf0; --acc-ink:#0a0d18; --sec:#79c2a8; --good:#79c2a8; --warn:#cfa14e; --over:#d07a66; --clin:#6f9fd0; } /* 4 — Slate-Cyan (imaging console; dark-primary) */ html[data-palette="slate-cyan"]{ --bg:light-dark(#eef3f6,#0e1418); --surf:light-dark(#ffffff,#16202a); --surf-2:light-dark(#e3eaef,#1e2c38); --line:light-dark(#d6e0e7,#243341); --ink:light-dark(#16242e,#e9f1f5); --ink-soft:light-dark(#3f535f,#b3c4cf); --muted:light-dark(#66798a,#788d99); --acc:light-dark(#0b6f83,#2bb6c8); --acc-ink:light-dark(#ffffff,#04181c); --sec:light-dark(#3f8a66,#62b58f); --good:light-dark(#3f8a66,#62b58f); --warn:#c98a2e; --over:#cf6857; --clin:#3f93b8; } /* 5 — Blossom (soft rose; light-primary) */ html[data-palette="blossom"]{ --bg:light-dark(#f8f1f1,#161013); --surf:light-dark(#fffafa,#201920); --surf-2:light-dark(#f3e7e8,#2a2029); --line:light-dark(#ecdcde,#2e2229); --ink:light-dark(#2a1f24,#f3e8ec); --ink-soft:light-dark(#4f3d44,#d2bcc4); --muted:light-dark(#7a626b,#998490); --acc:light-dark(#a3475f,#d77f9c); --acc-ink:light-dark(#fff7f8,#1c1014); --sec:light-dark(#6a9a72,#82b58a); --good:light-dark(#6a9a72,#82b58a); --warn:#cf9a55; --over:#d2738a; --clin:#9a86c0; } /* 6 — Contrast (WCAG-AA-forward) */ html[data-palette="contrast"]{ --bg:light-dark(#ffffff,#000000); --surf:light-dark(#ffffff,#0d0d0d); --surf-2:light-dark(#f0f0f0,#1a1a1a); --line:light-dark(#cfcfcf,#3a3a3a); --ink:light-dark(#111111,#ffffff); --ink-soft:light-dark(#2e2e2e,#e0e0e0); --muted:light-dark(#4a4a4a,#b8b8b8); --acc:light-dark(#0a55c4,#5aa0ff); --acc-ink:light-dark(#ffffff,#00112e); --sec:light-dark(#1c7a3f,#5fd089); --good:light-dark(#1c7a3f,#5fd089); --warn:light-dark(#9a6a00,#ffc14d); --over:light-dark(#b21f1f,#ff7a6b); --clin:light-dark(#0a55c4,#5aa0ff); } /* 7 — Forest (evergreen + moss; dark-primary) */ html[data-palette="forest"]{ --bg:light-dark(#eef2ec,#0d130f); --surf:light-dark(#ffffff,#16201a); --surf-2:light-dark(#e3ebe2,#1e2c23); --line:light-dark(#d6e0d4,#243029); --ink:light-dark(#1a241c,#ecefe6); --ink-soft:light-dark(#41513f,#c2cdba); --muted:light-dark(#67756a,#7f8c79); --acc:light-dark(#3f7d3c,#6fae6a); --acc-ink:light-dark(#ffffff,#0a160c); --sec:light-dark(#9a6e1f,#d3a24e); --good:light-dark(#3f7d3c,#6fae6a); --warn:#c69036; --over:#c96a4a; --clin:#3f8a9c; } /* 8 — Sunrise (warm coral + teal; light-primary) */ html[data-palette="sunrise"]{ --bg:light-dark(#fdf4ec,#160f0a); --surf:light-dark(#fffcf8,#211711); --surf-2:light-dark(#f7e9dd,#2c2018); --line:light-dark(#efe0d1,#2f2118); --ink:light-dark(#2a2017,#f4e8dc); --ink-soft:light-dark(#574636,#d4c1ac); --muted:light-dark(#82705d,#9a8470); --acc:light-dark(#c0501e,#f08153); --acc-ink:light-dark(#fff8f3,#1a0d06); --sec:light-dark(#2f8a7a,#4cb6a2); --good:light-dark(#2f8a7a,#4cb6a2); --warn:#d49a3e; --over:#df6f49; --clin:#3f9ab0; } /* =========================================================================== BASE + shared instrument primitives (consume tokens only) =========================================================================== */ *{box-sizing:border-box} html,body{margin:0;height:100%} body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:var(--t-body); line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} h1,h2,h3,h4{font-family:var(--f-display);line-height:var(--lh-tight);margin:0;color:var(--ink);font-weight:500} a{color:var(--acc)} .mono{font-family:var(--f-mono)} .measure{max-width:var(--measure)} /* focus + motion (a11y) */ :focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:inherit} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important} } /* buttons */ .btn{font:inherit;font-family:var(--f-ui);font-weight:600;cursor:pointer;border:0;border-radius:var(--r-2); padding:9px 15px;background:var(--acc);color:var(--acc-ink);min-height:40px} .btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)} .btn[disabled]{opacity:.5;cursor:default} .btn.ghost{background:var(--surf);color:var(--ink);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--line-hi);filter:none} /* card */ .card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-5)} .card:where(.hoverable):hover{border-color:var(--line-hi);background:var(--acc-glow)} /* status as colored text labels (NOT decorative pills) */ .status{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:600; padding:3px 8px;border-radius:var(--r-1);line-height:1} .status.soon{color:var(--warn);background:var(--warn-dim)} .status.over{color:var(--over);background:var(--over-dim)} .status.done{color:var(--good);background:var(--good-dim)} /* interactive filter chip (the ONLY rounded-pill use) */ .chip{font:inherit;font-size:var(--t-sm);cursor:pointer;border:1px solid var(--line);background:var(--surf); color:var(--ink-soft);border-radius:var(--r-pill);padding:6px 12px;min-height:32px} .chip:hover{border-color:var(--line-hi)} .chip.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)} /* meters: one solid fill, mono readout */ .meter{height:8px;background:var(--surf-2);border-radius:var(--r-pill);overflow:hidden} .meter>i{display:block;height:100%;border-radius:inherit} .meter.clin>i{background:var(--clin)} .meter.comp>i{background:var(--good)} .meter-num{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-soft)}