/* ═══════════════════════════════════════════════════════════ Design tokens — the single source of truth for the palette, radii, shadows and easings shared by the landing page, the patient dashboard and the doctor dashboard. Previously this block was duplicated verbatim in landing.css and app.css (AC17/AC18/LC22), which meant a colour change had to be made twice and the two copies had already drifted: the status colours (--ok/--warn/--bad) existed only in app.css, so landing.css open-coded #3E7A48 in six places (LC11) and the dark sections open-coded eight more (LC10). Load this BEFORE the page stylesheet. ═══════════════════════════════════════════════════════════ */ :root { /* ── Palette ──────────────────────────────────────────── */ --terra: #C15B3A; --deep-terra: #8C3A1F; --sand: #F5EDE0; --warm-white: #FFFAF5; --brick: #7A3520; --gold: #D4974A; --gold-light: #F2C878; --dusty: #E8D5C0; --charcoal: #2A1810; --mist: #9C806A; /* ── Semantic surfaces ────────────────────────────────── */ --surface: var(--warm-white); --ground: var(--sand); --line: var(--dusty); --ink: var(--charcoal); --ink-soft: var(--mist); /* ── Status ───────────────────────────────────────────── */ --ok: #3E7A48; --ok-bg: rgba(78, 154, 90, .13); --ok-line: rgba(78, 154, 90, .40); --warn: #8A5E1E; --warn-bg: rgba(212, 151, 74, .18); --warn-line: rgba(212, 151, 74, .50); --bad: #B4472A; --bad-bg: rgba(180, 71, 42, .12); --bad-line: rgba(180, 71, 42, .40); /* Terra tints, so the dark theme can retint them in one place instead of the eight hardcoded rgba(193,91,58,…) values the two stylesheets used to carry. */ --terra-05: rgba(193, 91, 58, .05); --terra-08: rgba(193, 91, 58, .08); --terra-10: rgba(193, 91, 58, .10); --terra-12: rgba(193, 91, 58, .12); --terra-20: rgba(193, 91, 58, .20); --terra-30: rgba(193, 91, 58, .30); --terra-ring: rgba(193, 91, 58, .14); /* ── Permanently-dark accent sections (security, network, "now serving", footer, toasts). These are dark in BOTH themes by design, so they get their own scale rather than flipping with --surface. ───────────────────────────────── */ --dark-1: #241410; --dark-2: #180D09; --dark-3: #2E1A13; --dark-panel: #3A2418; --on-dark: #FFF6EC; --on-dark-soft: #C4A992; --on-dark-mute: #A98D75; --on-dark-faint:#8D735E; --on-dark-body: #F3E7DC; --dark-hairline: rgba(242, 200, 120, .12); /* ── Shape ────────────────────────────────────────────── */ --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 18px; --r-3xl: 26px; --r-pill: 999px; /* ── Elevation ────────────────────────────────────────── */ --shadow-btn: 0 4px 16px rgba(193, 91, 58, .25); --shadow-btn-hi: 0 8px 26px rgba(193, 91, 58, .38); --shadow-card: 0 1px 4px rgba(42, 24, 16, .05); --shadow-lift: 0 18px 50px -12px rgba(42, 24, 16, .18); --shadow-deep: 0 40px 90px -20px rgba(42, 24, 16, .3); /* ── Motion ───────────────────────────────────────────── */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ── Direction sign, for the few transforms that need it ── */ --dir: 1; /* ── Layout breakpoints, exported so JavaScript can read the same numbers instead of hardcoding its own copy (LJ12/LC14). Read with getComputedStyle(document.documentElement). ──── */ --bp-lap: 1024; --bp-tab: 860; --bp-phone: 560; } html[dir="rtl"] { --dir: -1; } html[data-theme="dark"] { --surface: #2E1C12; --warm-white: #2E1C12; --ground: #201207; --sand: #201207; --line: #4E3524; --dusty: #4E3524; --ink: #F6EEE2; --ink-soft: #C3A98C; --mist: #C3A98C; --charcoal: #170D06; --terra: #D97C52; --deep-terra: #A94F2E; --brick: #A9603A; /* Measured against the dark surface the light-mode status colours sit only ~2-2.7:1 apart; these clear ~4.5:1 again. */ --ok: #7DD88A; --ok-bg: rgba(61, 173, 89, .22); --ok-line: rgba(125, 216, 138, .40); --warn: #F0B94D; --warn-bg: rgba(196, 137, 58, .22); --warn-line: rgba(240, 185, 77, .40); --bad: #F0796A; --bad-bg: rgba(196, 74, 50, .22); --bad-line: rgba(240, 121, 106, .40); /* Retinted to the brighter dark-mode terra so these read as a terra wash rather than a grey smudge. */ --terra-05: rgba(217, 124, 82, .07); --terra-08: rgba(217, 124, 82, .10); --terra-10: rgba(217, 124, 82, .14); --terra-12: rgba(217, 124, 82, .16); --terra-20: rgba(217, 124, 82, .24); --terra-30: rgba(217, 124, 82, .35); --terra-ring: rgba(217, 124, 82, .18); --dark-panel: #4A3020; --shadow-btn: 0 4px 18px rgba(0, 0, 0, .45); --shadow-btn-hi: 0 8px 26px rgba(0, 0, 0, .55); --shadow-card: 0 1px 4px rgba(0, 0, 0, .4); --shadow-lift: 0 18px 50px -12px rgba(0, 0, 0, .55); --shadow-deep: 0 40px 90px -20px rgba(0, 0, 0, .65); /* Tell native form controls, scrollbars and the print preview that the page went dark. */ color-scheme: dark; } /* ── Primitives every page needs ──────────────────────────── */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } img, svg { max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 4px; } /* Grid cells sit 3-4px apart, so the offset ring bleeds into the neighbouring cell (AC7). Tighten it there and rely on the fill change for the rest of the affordance. */ .cal-day:focus-visible, .dp-day:focus-visible, .slot:focus-visible { outline-width: 2px; outline-offset: 1px; } /* `hidden` must beat display:flex/grid, which it does not by default. */ [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Hand-drawn line-icon sprite. Sized in em so each icon inherits whatever font-size its container already had, coloured through currentColor so it follows the surrounding text. */ .icon { width: 1em; height: 1em; display: inline-block; flex: none; vertical-align: -.15em; color: currentColor; } /* ── Reduced motion ─────────────────────────────────────────── Zeroes duration AND delay: without the delay reset, staged entrances still wait out their timers before snapping in, which is the opposite of what the query asks for (AC14/LC23). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; } } /* ── No-script fallback ─────────────────────────────────────── Both dashboards hide every screen in the markup and rely on boot() to reveal one, so with scripting unavailable they used to render as a blank white document. Lives here, not in a page stylesheet, because all three pages load this file first and the note must be styled even if nothing else is. Deliberately does not depend on the `js` class: