/* ========================================================================== tokens.css — the ONE shared design-token sheet (docs/archive/THEMING_PLAN.md) ========================================================================== Step 1 state: LIGHT values only, plain :root. Nothing links to this file yet, so it has zero visible effect until Step 3 (index.html) and Step 4 (admin.css/admin-agenda.css) migrate onto it. Dark values arrive in Step 6 as `@media (prefers-color-scheme: dark)` + `[data-theme="dark"]` blocks; per-clinic brand_color overrides the accent ramp at runtime via theme.js's applyBrandColor() (inline styles on , which win over anything here). Values below are read off the CURRENT live palettes (admin.css :root + index.html :root as of 2026-07-15), not invented — this file consolidates, it does not redesign. Where the two palettes disagree today, the chosen value is marked PROVISIONAL and gets confirmed against Step 2's rename table before any call site migrates onto it. Tiers: - Semantic (what components reference): neutrals, accent ramp, status. - Component (geometry/type): radius / shadow / font scales — values provisional until Step 7 reads off the most common existing ones. ========================================================================== */ :root { color-scheme: light; /* browsers render native widgets/scrollbars to match; swapped by the dark blocks below */ /* ---- Neutrals (the scheme axis — these swap in dark mode, Step 6) ---- */ --ink: #1e293b; /* slate-800 body text (already identical in admin.css + index.html) */ --ink-strong: #0f172a; /* slate-900 headings (admin's --v2-ink-strong) */ --muted: #64748b; /* slate-500 secondary text (already identical in both) */ --muted-2: #94a3b8; /* slate-400 faint labels (admin's --v2-muted-2) */ --bg: #f2ead9; /* warm beige page background (2026-07-15, later same day) — was slate-50 #f8fafc; changed so white --panel cards/frames visibly stand out against the page instead of nearly blending into it. Only this one line changed — --panel, fonts, shadows, and every other token are untouched. */ --panel: #ffffff; /* opaque card/panel surface (absorbs admin's --panel + --v2-surface) */ --panel-2: #f1f5f9; /* slate-100 recessed surface / field bg (absorbs --v2-surface-2 + index.html's --field-bg — same value both sides today) */ --panel-glass: rgba(255,255,255,.92); /* index.html's translucent glass panel — deliberately a SEPARATE token from --panel so the glassmorphism look survives the merge */ --glass: rgba(15,23,42,.05); /* faint ink wash (index.html's old --glass-strong; its old, weaker --glass was dead and is deleted) */ --border: rgba(15,23,42,.10); /* translucent hairline (admin's --line == index.html's --border, byte-identical today) */ --border-2: #e2e8f0; /* slate-200 solid border (admin's --v2-border) — deliberately heavier than --border, not a duplicate */ --border-strong: #cbd5e1; /* slate-300 (admin's --v2-border-strong) */ /* ---- Accent ramp (the brand axis — theme.js applyBrandColor() overrides these four at runtime from site_config.yaml's brand_color; the values here are the un-configured teal default) ---- */ --accent: #0d9488; /* teal-600 (admin --sand == index --primary) */ --accent-dark: #0f766e; /* teal-700 — RESOLVED (user, 2026-07-15): the one dark accent; absorbs --sand-dark, index's --primary-dark (#0e7490), AND admin's --v2-accent-dark cyan (#0e7490), both retired */ --accent-light: #10b981; /* emerald-500 (index.html's current --accent); brand-computed as shade(+25) at runtime */ --accent-rgb: 13,148,136; /* "r,g,b" triple for rgba(var(--accent-rgb), a) glows/tints */ --accent-light-rgb: 16,185,129; /* --accent-light's triple, for the emerald hover glows (Step 5) */ --accent-ink: #ffffff; /* text/icons on top of --accent (replaces admin's --sand-ink) */ --accent-bg: #f0fdfa; /* teal-50 pale accent tint (admin's --v2-accent-bg; also fixes cfg-holidays.html's undefined --sand-light) */ --accent-border: #99f6e4; /* teal-200 (admin's --v2-accent-border) */ /* ---- Chat Bubbles ---- */ --chat-bubble-client: #f0fdfa; /* default light teal tint */ --chat-bubble-ai: #f1f5f9; /* default slate-100 recessed */ /* ---- Status (shared across both surfaces; -bg/-border promoted from admin's --v2-* pill triplets) ---- */ --danger: #e11d48; /* rose-600 (admin --danger == index --err) */ --danger-bg: #fff1f2; --danger-border: #fecdd3; --ok: #059669; /* emerald-600 (already identical in both) */ --ok-bg: #ecfdf5; --ok-border: #a7f3d0; --warn: #b45309; /* amber-700 (admin --v2-warn) */ --warn-bg: #fffbeb; --warn-border: #fde68a; --info: #2563eb; /* blue-600 (admin --v2-info, promoted) */ /* NOTE: the medical-alert triplet (--alert/--alert-bg/--alert-text) stays admin-local in admin.css by design — the deliberate "exactly two reds" rule; it is NOT merged into --danger and does not move here. */ /* ---- Geometry (component tier — FINALIZED in Step 7 from a real tally of existing values across admin.css/admin-agenda.css/index.html; xs/sm/md are the three genuinely common tiers, lg/xl exist but are rare. Deliberately NOT tokenized: 50% (circles), 99px/999px (pills), and one-off component values like 6/7/9/18/20/26px) ---- */ --radius-xs: 8px; /* small chips/inputs (7 call sites) */ --radius-sm: 10px; /* the dominant control radius (admin --v2-radius-sm) */ --radius-md: 14px; /* cards (admin --v2-radius) */ --radius-lg: 16px; --radius-xl: 24px; /* ---- Shadows (promoted verbatim from admin's --v2-shadow-*, already correctly ink-tinted rgba(15,23,42,…) not pure black; whether a 4th "lg" tier is needed gets decided from real data in Step 7) ---- */ --shadow-xs: 0 1px 2px rgba(15,23,42,.04); --shadow-sm: 0 4px 12px rgba(15,23,42,.05); --shadow-md: 0 12px 32px rgba(15,23,42,.08); /* ---- Typography (the stacks duplicated verbatim across admin.css + index.html today) ---- */ --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; --font-serif: Georgia, "Times New Roman", serif; } /* ========================================================================== Dark scheme (Step 6). Two entry points, SAME values (keep them in sync): 1. OS preference, when no manual override is set (no data-theme attr, or an explicit data-theme="dark"). 2. Explicit data-theme="dark", regardless of OS preference. :root:not([data-theme="light"]) inside the media query makes a manual "light" override beat a dark OS preference. theme.js's applyThemeMode() owns the attribute + localStorage persistence. Only NEUTRAL + STATUS tokens swap — the accent ramp keeps its hue (teal default or brand_color, both read fine on slate-900/800), while the accent-tinted SURFACES (--accent-bg/--accent-border) switch from the fixed pale-teal literals to rgba(var(--accent-rgb)) tints, since a pale pastel would glow like a highlighter on a dark panel. Status hues step one shade brighter (rose/emerald/amber/blue -400/-500) for contrast on dark, with their -bg/-border pills becoming translucent tints of the same hue. Shadows go black-based and heavier — the ink-tinted light shadows read as mud on dark. The admin-local --alert triplet gets the same treatment in admin.css (it doesn't live here by design). ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #e2e8f0; --ink-strong: #f8fafc; --muted: #94a3b8; --muted-2: #64748b; --bg: #0f172a; --panel: #1e293b; --panel-2: #334155; --panel-glass: rgba(30,41,59,.92); --glass: rgba(226,232,240,.07); --border: rgba(226,232,240,.14); --border-2: #334155; --border-strong: #475569; --accent-bg: rgba(var(--accent-rgb), .16); --accent-border: rgba(var(--accent-rgb), .38); --danger: #fb7185; --danger-bg: rgba(251,113,133,.14); --danger-border: rgba(251,113,133,.38); --ok: #34d399; --ok-bg: rgba(52,211,153,.14); --ok-border: rgba(52,211,153,.38); --warn: #fbbf24; --warn-bg: rgba(251,191,36,.14); --warn-border: rgba(251,191,36,.38); --info: #60a5fa; --shadow-xs: 0 1px 2px rgba(0,0,0,.45); --shadow-sm: 0 4px 12px rgba(0,0,0,.5); --shadow-md: 0 12px 32px rgba(0,0,0,.6); --chat-bubble-client: rgba(var(--accent-rgb), .16); --chat-bubble-ai: #334155; } } :root[data-theme="dark"] { color-scheme: dark; --ink: #e2e8f0; --ink-strong: #f8fafc; --muted: #94a3b8; --muted-2: #64748b; --bg: #0f172a; --panel: #1e293b; --panel-2: #334155; --panel-glass: rgba(30,41,59,.92); --glass: rgba(226,232,240,.07); --border: rgba(226,232,240,.14); --border-2: #334155; --border-strong: #475569; --accent-bg: rgba(var(--accent-rgb), .16); --accent-border: rgba(var(--accent-rgb), .38); --danger: #fb7185; --danger-bg: rgba(251,113,133,.14); --danger-border: rgba(251,113,133,.38); --ok: #34d399; --ok-bg: rgba(52,211,153,.14); --ok-border: rgba(52,211,153,.38); --warn: #fbbf24; --warn-bg: rgba(251,191,36,.14); --warn-border: rgba(251,191,36,.38); --info: #60a5fa; --shadow-xs: 0 1px 2px rgba(0,0,0,.45); --shadow-sm: 0 4px 12px rgba(0,0,0,.5); --shadow-md: 0 12px 32px rgba(0,0,0,.6); --chat-bubble-client: rgba(var(--accent-rgb), .16); --chat-bubble-ai: #334155; }