/* theme.css — single source of truth for colours, type and base styles. Light internal-tool theme. To re-theme the whole app, edit the variables in :root only. To switch the whole app to the dark palette: . */ /* Self-hosted fonts (woff2 in ../fonts). Replaces the Google Fonts — no external request, works offline, no third-party connection. Only the weights the UI uses: Hanken Grotesk 400/500/600 (body) and Spectral 500/600 (display). font-display:swap so text paints immediately in the fallback and swaps when the woff2 arrives. */ @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/hanken-grotesk-400.woff2') format('woff2')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/hanken-grotesk-500.woff2') format('woff2')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/hanken-grotesk-600.woff2') format('woff2')} @font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/spectral-500.woff2') format('woff2')} @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/spectral-600.woff2') format('woff2')} :root { /* surfaces (warm Vitesta neutrals) */ --bg: #f6f2ea; /* warm sand app background */ --surface: #ffffff; /* cards / panels */ --surface-2: #f1ece2; /* raised / subtle fills */ --border: #e5ddcf; /* borders / dividers */ /* text */ --text: #201c16; /* warm ink */ --muted: #6e6456; /* secondary text */ /* brand: Lens Blue primary, Clay accent (Vitesta brand book) */ --accent: #4a7290; --accent-strong: #3d5f79; --accent-bg: #e4ecf1; --clay: #bc6a4a; --danger: #a32d2d; --danger-bg: #f7e7e3; --warning: #854f0b; --warning-bg: #f6ecda; --success: #0f6e56; --success-bg: #e6f1ec; --info: #2e6491; --info-bg: #e3edf6; /* status blue: "confirmed" — deeper than the interactive accent */ /* --warn / --ok / --od are USED ~19 times across app.css but were never DECLARED, so every one silently fell back to its hardcoded hex and stayed light in dark mode. --warn also failed contrast on the near-white attention strip (#d97706 was ~3.0:1 on the header a booker scans every day). Declaring them here makes every existing var(--warn, ...) theme-aware at a stroke. */ --warn: #b26a08; --ok: #0f6e56; --od: #5b6878; /* Foreground for filled/accent buttons. Was a hardcoded #fff everywhere, which sits at 2.0-3.1:1 on the LIGHTER dark-mode fills - the office Done / Could-not-complete toggle worst of all. */ --on-accent: #ffffff; --missed: #b23a70; --missed-bg: #f7e3ee; /* pink: nurse reported "could not complete" */ --overdue: #7f1d1d; --overdue-bg: #f0d3d3;/* dark red: visit ended, nurse has not reported */ --shade: rgba(0, 0, 0, 0.05); /* off-hours shading on the day grid */ /* type + shape + depth */ --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Spectral", Georgia, serif; --radius: 12px; --shadow-sm: 0 1px 2px rgba(32, 28, 22, 0.06); --shadow: 0 1px 3px rgba(32, 28, 22, 0.08), 0 4px 12px rgba(32, 28, 22, 0.05); --shadow-lg: 0 12px 32px rgba(32, 28, 22, 0.14); } /* Dark palette — flip with (kept here so swapping is one attribute). */ [data-theme="dark"] { --bg: #16120d; --surface: #1f1a14; --surface-2: #271f18; --border: #39322a; --text: #faf6ee; --muted: #c2b8a6; --accent: #6f99b6; --accent-strong: #4a7290; --accent-bg: #21323d; --clay: #d08a6e; --danger: #d89a7e; --danger-bg: #331e16; --warning: #e0b36a; --warning-bg: #33281a; --success: #8fc2ac; --success-bg: #1f3329; --info: #7fa9cc; --info-bg: #1e2f3f; --warn: #e0b36a; --ok: #8fc2ac; --od: #8794a8; --on-accent: #16120d; /* dark ink on the lighter dark-mode fills: 6.0:1 on --accent */ --missed: #d891b4; --missed-bg: #33202a; --overdue: #e07f7f; --overdue-bg: #3a1717; --shade: rgba(255, 255, 255, 0.05); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); } [data-theme="dark"] { color-scheme: dark; } /* ---- base ---- */ * { box-sizing: border-box; } html, body { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-tap-highlight-color: transparent; } h1, h2, h3 { font-weight: 500; margin: 0; } /* Text selection: blue highlight with white text. NB: ::selection ignores CSS variables in Chrome, so use a literal colour here (Lens Blue). */ ::selection { background: #4a7290; color: #fff; } ::-moz-selection { background: #4a7290; color: #fff; } button, input, select, textarea { font: inherit; } input, select, textarea { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; } button { cursor: pointer; padding: 0.55rem 0.9rem; border-radius: var(--radius); font-weight: 500; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); transition: background 0.15s, border-color 0.15s, transform 0.05s, box-shadow 0.15s; } button:hover { background: var(--accent-strong); border-color: var(--accent-strong); } button:active { transform: scale(0.98); } button:disabled { opacity: 0.4; cursor: default; transform: none; } button:disabled:hover { background: var(--accent); border-color: var(--accent); } button:disabled { opacity: 0.55; cursor: default; }