/* ========================================================================== 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) The tint itself is split out into --shadow-tint-rgb (2026-07-xx, the day/night color-scheme feature) so a scheme's custom_theme override can recolor shadows toward its own palette (e.g. a soft marine tint for "Esmeralda y Marino" — see cfg-theme.html's THEME_PRESETS and theme.js's applyCustomTheme, which derives this triple from a picked --shadow-tint hex the same way it derives --accent-rgb from --accent) WITHOUT hardcoding that tint as this file's own default — every clinic that hasn't picked a scheme keeps this exact neutral ink tint, unchanged. --shadow-tint itself isn't declared here (nothing reads it directly, only its derived -rgb); ALLOWED_THEME_TOKENS/cfg-theme.html is where a clinic sets it. --shadow-intensity (2026-07-xx, the "shadow depth" slider in Estilo) is a plain multiplier — 1 reproduces the exact values below unchanged (every clinic that's never touched the slider), higher deepens, lower flattens. First shipped scaling ONLY the alpha channel; found (2026-07-xx, later) that this was barely perceptible even at the slider's max, since these baseline opacities are deliberately faint (.04-.08) — a 2.5x multiplier on .05 is still only .125, easy to miss by eye. Now scales the Y-OFFSET and BLUR-RADIUS by the same multiplier too, alongside alpha — a real "lift" needs the shadow to visibly reach further, not just get a bit darker. At 1 every number below is completely unchanged (e.g. calc(4px * 1) = 4px); at 2.5 --shadow-sm becomes "0 10px 30px rgba(...,.125)" instead of "0 4px 12px rgba(...,.125)" — now unmistakable. A single knob scales all three tiers proportionally, independent of --shadow-tint's color and NOT part of custom_theme (it's a number, not a hex, so it can't go through ALLOWED_THEME_TOKENS's hex-only validation) — see backend/admin.py's separate top-level shadow_intensity config field and theme.js's applyShadowIntensity(). Only declared once here; both dark blocks below inherit it rather than redeclaring, since "how deep" was never asked to differ between Day and Night, only the tint color was. */ --shadow-intensity: 1; --shadow-tint-rgb: 15,23,42; --shadow-xs: 0 calc(1px * var(--shadow-intensity)) calc(2px * var(--shadow-intensity)) rgba(var(--shadow-tint-rgb),calc(.04 * var(--shadow-intensity))); --shadow-sm: 0 calc(4px * var(--shadow-intensity)) calc(12px * var(--shadow-intensity)) rgba(var(--shadow-tint-rgb),calc(.05 * var(--shadow-intensity))); --shadow-md: 0 calc(12px * var(--shadow-intensity)) calc(32px * var(--shadow-intensity)) rgba(var(--shadow-tint-rgb),calc(.08 * var(--shadow-intensity))); /* ---- 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-tint-rgb: 0,0,0; --shadow-xs: 0 calc(1px * var(--shadow-intensity)) calc(2px * var(--shadow-intensity)) rgba(var(--shadow-tint-rgb),calc(.45 * var(--shadow-intensity))); --shadow-sm: 0 calc(4px * var(--shadow-intensity)) calc(12px * var(--shadow-intensity)) rgba(var(--shadow-tint-rgb),calc(.5 * var(--shadow-intensity))); --shadow-md: 0 calc(12px * var(--shadow-intensity)) calc(32px * var(--shadow-intensity)) rgba(var(--shadow-tint-rgb),calc(.6 * var(--shadow-intensity))); --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-tint-rgb: 0,0,0; --shadow-xs: 0 calc(1px * var(--shadow-intensity)) calc(2px * var(--shadow-intensity)) rgba(var(--shadow-tint-rgb),calc(.45 * var(--shadow-intensity))); --shadow-sm: 0 calc(4px * var(--shadow-intensity)) calc(12px * var(--shadow-intensity)) rgba(var(--shadow-tint-rgb),calc(.5 * var(--shadow-intensity))); --shadow-md: 0 calc(12px * var(--shadow-intensity)) calc(32px * var(--shadow-intensity)) rgba(var(--shadow-tint-rgb),calc(.6 * var(--shadow-intensity))); --chat-bubble-client: rgba(var(--accent-rgb), .16); --chat-bubble-ai: #334155; }