/* ============================================================================ OMF|SURGERY — Design Tokens ("Chart" system) ---------------------------------------------------------------------------- The single source of truth for color, type, spacing, radius, and elevation. Light theme lives on :root; dark theme overrides on [data-theme="dark"] (same attribute + toggle mechanism the shell already uses). TWO SETS LIVE IN THIS FILE (tokens v2 landed 2026-08-01): :root → v1.0 COMPATIBILITY LAYER — FROZEN. Warm neutrals + navy. Nine live modules consume these names directly; retuning them in place would re-theme production. Do not change these values. They are deleted, not edited, when the last module has migrated (retirement R9). :root[data-tokens="v2"] → v2 CANONICAL SET — build all new work here. Cool neutrals · one primary blue · Inter-only body scale · radii 5/8/12 · 12/14 text floor. Source: DESIGN_SYSTEM_ADDENDUM §15.4 "proposed tokens v1.1 preview" in design/notes-mockup.html + design/calendar-mockup.html. HOW A MODULE MIGRATES (one line — no CSS edits): ← opt in Every var(--…) the module already reads — semantic names AND legacy aliases like --navy — resolves to the v2 value from that moment. Migration is a per-module decision owned by the gated builds, never a global sweep. Rules of use (full rationale in DESIGN_SYSTEM.md): • Never hardcode a hex in module CSS. If a color isn't here, it doesn't exist. • Never write a [data-theme="dark"] override in a module. Dark is solved HERE. • This file does not import fonts — keep the existing Google Fonts per page. In v2, --font-display IS Inter; Oswald survives as --font-brand for the wordmark only (in-app Oswald removal is retirement R9, not this lane). ========================================================================== */ /* ═══════════════════════════════════════════════════════════════════════════ v1.0 COMPATIBILITY LAYER — FROZEN 2026-08-01. Values must not change. New work does not build on this set; see :root[data-tokens="v2"] below. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ------------------------------------------------------------ TYPE ----- */ --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Oswald', var(--font-ui); /* brand + screen titles ONLY */ --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* Closed type scale — six sizes. Do not invent intermediate sizes. */ --fs-caption: 11px; /* timestamps, footnotes, tile labels */ --fs-label: 12px; /* chips, field labels, secondary text */ --fs-body: 13px; /* default control + body text (dense) */ --fs-emph: 15px; /* card titles, list primary text */ --fs-title: 17px; /* screen titles */ --fs-display: 22px; /* rare — login, empty states */ --lh-tight: 1.2; --lh-body: 1.45; /* Three weights. 700 is reserved for mono code emphasis only. */ --fw-reg: 400; --fw-med: 500; --fw-semi: 600; /* --------------------------------------------------------- SPACING ----- */ /* 4px base scale. Pick from these; never 1/2/3px one-offs. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; /* Touch */ --hit-min: 44px; /* minimum interactive target */ --hit-primary: 52px; /* primary action bars */ /* ---------------------------------------------------------- RADIUS ----- */ --r-sm: 6px; /* chips, inputs, small controls, code cells */ --r-md: 10px; /* cards, panels */ --r-lg: 16px; /* sheets, modals */ --r-pill: 999px; /* count badges, segmented pills, status rails */ /* ------------------------------------------------------- ELEVATION ----- */ /* Resting UI is FLAT (hairlines, no shadow). Shadow = floating only. */ --shadow-overlay: 0 4px 16px rgba(42, 41, 37, 0.10); /* menus, popovers */ --shadow-modal: 0 12px 32px rgba(42, 41, 37, 0.16); /* modals, sheets */ /* ---------------------------------------------------------- MOTION ----- */ --dur-fast: 120ms; --dur: 200ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* --------------------------------------------------------- Z-INDEX ----- */ --z-sticky: 10; --z-overlay: 100; --z-modal: 1000; /* ------------------------------------------------------- SURFACES ------ */ --bg: #F7F6F2; /* page background — warm paper */ --surface: #FFFFFF; /* cards, panels, inputs */ --surface-wash: #F7F6F1; /* inset areas inside a card (code cells, previews) */ --row-hover: #F2F1EB; --hairline: #E6E3DB; /* the only border color for containers */ --hairline-strong: #D8D4C9; /* inputs, dashed placeholders */ --scrim: rgba(42, 41, 37, 0.40); /* behind modals/sheets */ /* ----------------------------------------------------------- TEXT ------ */ --text-main: #2A2925; --text-muted: #767268; --text-faint: #9B968A; /* timestamps, hints — decorative text only */ --on-brand: #FFFFFF; --on-strong: #FFFFFF; /* text on any -strong fill */ /* ---------------------------------------------------------- BRAND ------ */ --brand-ink: #24466E; /* navy as text/icon/accent (titles, links) */ --brand-fill: #24466E; /* navy as a surface (primary buttons, sidebar) */ --brand-fill-hover: #1C3A5E; --brand-wash: #EBF0F6; /* selected-state tint */ --focus-ring: rgba(36, 70, 110, 0.35); /* --------------------------------------------------- STATUS TRIADS ----- Each status = text / bg / strong. Chips use text+bg; rails & dots use strong; buttons may use strong as fill with --on-strong text. */ --ok-text: #2E6B4F; --ok-bg: #E9F2EC; --ok-strong: #3A8A64; --warn-text: #8F6A14; --warn-bg: #FAF3E3; --warn-strong: #C89019; --danger-text: #A03B32; --danger-bg: #F7EAE7; --danger-strong: #BE4A3F; --info-text: #46609E; --info-bg: #E9EDF7; --info-strong: #7C93CE; --violet-text: #6D5595; --violet-bg: #EFEBF6; --violet-strong: #8A63D2; --neutral-text: #767268; --neutral-bg: #EFEEE9; --neutral-strong: #A5A093; /* ------------------------------------------------- MEDICAL TIERS ------- ASA-style informational tiers: M1 / M2 / M3. Attention grading WITHOUT error styling — M3 is deep orange, never red. Red is reserved for conflicts / safety failures. */ --med1-text: #7A7146; --med1-bg: #F5F2E7; --med1-strong: #A99C55; --med2-text: #8F6A14; --med2-bg: #FAF3E3; --med2-strong: #C89019; --med3-text: #9C5316; --med3-bg: #F9EDDE; --med3-strong: #C97A2E; /* ------------------------------------------------------ CARD RAILS ----- The 2b soft inset rail. Rail = highest-priority state on the card: conflict > med3 > med2/decision > info > clean. (DESIGN_SYSTEM.md §7) */ --rail-clean: var(--ok-strong); --rail-attn: var(--warn-strong); /* age-gate, ortho query, M2 */ --rail-attn-strong: var(--med3-strong); /* M3 */ --rail-info: var(--info-strong); /* CBCT required */ --rail-idle: var(--neutral-strong); /* awaiting pano */ --rail-conflict: var(--danger-strong); /* form-vs-pano, safety flags */ /* ---------------------------------------- LEGACY ALIASES (compat) ------ Existing modules consume these names. Values now resolve into the new system so old CSS keeps working while screens migrate. New code should use the semantic names above. NOTE for the shell: index.html uses --navy as the SIDEBAR SURFACE. When the shell migrates to this file, switch that one declaration to var(--brand-fill) (in dark, --navy becomes an ink color, as the modules already assume). */ --navy: var(--brand-ink); --navy-light: #2E5580; --blue: var(--brand-ink); --pane-bg: var(--surface); --card-bg: var(--surface); --controls-bg: var(--surface-wash); --border: var(--hairline); --card-border: var(--hairline); --header-bg: var(--surface); --header-border: var(--hairline); --login-bg: var(--bg); --text: var(--text-main); --card-text: var(--text-muted); --input-bg: var(--surface); --input-border: var(--hairline-strong); --danger: var(--danger-strong); --success: var(--ok-strong); --warn: var(--warn-strong); --warning: var(--warn-strong); --gray: var(--text-muted); --sidebar-width: 260px; } /* ============================================================== DARK ===== */ [data-theme="dark"] { /* Surfaces */ --bg: #191A17; --surface: #232420; --surface-wash: #2A2B25; --row-hover: #2C2D27; --hairline: #3A3B33; --hairline-strong: #4A4B41; --scrim: rgba(0, 0, 0, 0.55); /* Text */ --text-main: #E8E6DE; --text-muted: #A5A196; --text-faint: #7C786C; /* Brand — ink lightens for contrast; fill deepens for surfaces */ --brand-ink: #8AB0DC; --brand-fill: #2E568A; --brand-fill-hover: #3A659C; --brand-wash: #243143; --focus-ring: rgba(138, 176, 220, 0.40); /* Status triads */ --ok-text: #9ED4B4; --ok-bg: #263B2E; --ok-strong: #57B384; --warn-text: #DFBE72; --warn-bg: #3B3322; --warn-strong: #D0A13E; --danger-text: #F0A99E; --danger-bg: #442B27; --danger-strong: #D06A5C; --info-text: #A9BCE8; --info-bg: #2A3145; --info-strong: #7C93CE; --violet-text: #C9B8E8; --violet-bg: #383049; --violet-strong: #A182D6; --neutral-text: #A5A196; --neutral-bg: #2E2F29; --neutral-strong: #8A867A; /* Medical tiers */ --med1-text: #C4BD8F; --med1-bg: #333226; --med1-strong: #A99C55; --med2-text: #DFBE72; --med2-bg: #3B3322; --med2-strong: #D0A13E; --med3-text: #E8B183; --med3-bg: #453222; --med3-strong: #CE8A4A; /* Elevation reads darker */ --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.55); /* Legacy aliases that need explicit dark values */ --navy-light: #35618F; } /* ── Chart v1.1 (DESIGN_SYSTEM_ADDENDUM.md §10.1) — on-brand text/wash for the sidebar surface ── */ :root { --on-brand-muted: rgba(255, 255, 255, 0.72); /* nav labels, footer meta on brand-fill */ --on-brand-wash: rgba(255, 255, 255, 0.10); /* hover/active rows, dividers on brand-fill */ } [data-theme="dark"] { --on-brand-muted: rgba(255, 255, 255, 0.66); --on-brand-wash: rgba(255, 255, 255, 0.08); } /* ═══════════════════════════════════════════════════════════════════════════ TOKENS v2 — THE CANONICAL SET (landed 2026-08-01, Visual Refinement) --------------------------------------------------------------------------- Opt in per document: . Scoped, not global, so the nine modules already linking this file keep rendering off the frozen v1.0 layer until their gated build migrates them. Specificity note (why this works and why every theme-varying token below is declared TWICE): :root = (0,1,0) and [data-theme="dark"] = (0,1,0), so v1 dark wins on source order. :root[data-tokens="v2"] = (0,2,0) outranks BOTH — meaning any token set in the v2 light block would otherwise leak into dark. So the v2 dark block, :root[data-tokens="v2"][data-theme="dark"] = (0,3,0), must restate every theme-varying token the v2 light block declares. Tokens deliberately NOT restated (warn triad, info/violet text+bg, medical tiers) are inherited from v1 on purpose — see "deferred" note at the end. Legacy aliases are NOT redeclared here. --navy: var(--brand-ink) is computed on the same element, so it substitutes the v2 brand automatically. A module mid-migration renders correctly through old names and new ones alike. ═══════════════════════════════════════════════════════════════════════ */ :root[data-tokens="v2"] { /* ------------------------------------------------------------ TYPE ----- Inter-only. Oswald is no longer the display face; it survives only as --font-brand for the wordmark (DESIGN_SYSTEM v2 §1). Sweeping Oswald out of module CSS is retirement R9 — NOT this lane. */ --font-display: var(--font-ui); --font-brand: 'Oswald', var(--font-ui); /* 12/14 floor: nothing renders below 12px; reading text starts at 14px. --fs-caption rises 11→12 (the caption tier collapses onto the label size and is distinguished by weight, per DESIGN_SYSTEM v2 §1) and --fs-body rises 13→14. The scale stays closed at six sizes. */ --fs-caption: 12px; --fs-label: 12px; --fs-body: 14px; --fs-emph: 15px; --fs-title: 17px; --fs-display: 22px; /* ---------------------------------------------------------- RADIUS ----- 5 / 8 / 12 (§15.4 adopted pick; the review's 10–12 proposal was declined). */ --r-sm: 5px; --r-md: 8px; --r-lg: 12px; /* ------------------------------------------------------- SURFACES ------ Cool neutrals replace the warm paper stack. */ --bg: #F4F5F7; --surface: #FFFFFF; --surface-wash: #F1F2F4; --row-hover: #EDEFF2; --hairline: #E5E7EA; --hairline-strong: #D2D6DB; --scrim: rgba(23, 27, 32, 0.42); /* ----------------------------------------------------------- TEXT ------ */ --text-main: #20242A; --text-muted: #68707A; --text-faint: #9AA1A9; /* ---------------------------------------------------------- BRAND ------ ONE primary blue — ink and fill are the same value in light. They still diverge in dark (ink lightens for contrast, fill deepens for surfaces). RETUNED TO NAVY (PO 2026-09-10, on seeing the shell live: "change all that bright blue to navy blue shades!") — the family returns to the Chart navy the v1 layer established (#24466E), so mid-migration modules and the shell carry ONE navy instead of navy-next-to-bright-blue. Contrast held: #24466E on white ≈ 8.6:1; white on #24466E the same. */ --brand-ink: #24466E; --brand-fill: #24466E; --brand-fill-hover: #1C3A5E; --brand-wash: #EBF0F6; --focus-ring: rgba(36, 70, 110, 0.40); /* -------------------------------------------------- STATUS (retuned) --- Only the families the boards specify are retuned. Red is reserved: true conflicts and safety failures only — never fullness, never medical history (DESIGN_SYSTEM v2 law 8; §15.4 ">100% utilization"). */ --ok-text: #1E7A44; --ok-bg: #E9F5EE; --ok-strong: #2E9E5B; --danger-text: #C23A30; --danger-bg: #FBECEA; --danger-strong: #D3554A; --neutral-text: #5D646D; --neutral-bg: #EDEFF2; --neutral-strong: #A7AEB6; /* info + violet completed in v2.1 (2026-08-01). NOT a warm/cool preference: v1's --info-text #46609E was a SECOND BLUE against the v2 brand #2264D1, which §2 forbids ("one primary blue") — two adjacent desaturated blues read as a mistake. Violet's text/wash were mixed on warm paper; same fix. Board: design/tokens-v2-1-board.html §0. ⚠ An info chip now sits close to the --brand-wash selected state. §5's rule that a selected row carries a CHECK, not just a wash, is load-bearing — selection must never be signalled by colour alone (law 7 / §6.2). */ --info-text: #1D57AC; --info-bg: #E7F0FC; --info-strong: #4A8FE2; --violet-text: #63499F; --violet-bg: #EFEBFA; --violet-strong: #8E6BD4; /* warn + medical tiers — v2.1 option A "harmonised", picked by Andrew 2026-08-01 after reviewing A/B on real chips, banners and calendar rows. Same hues, rebuilt on the cool base: lower chroma, blue-shifted darks, washes pulled off warm paper. The semantic families now sit in ONE temperature with the neutrals — there is no warm/cool split carrying meaning in this system. Do not reintroduce one. M3 stays deep orange and NEVER red (law 8) — that rule is about hue, not warmth. Contrast verified on the picked values: lowest pair 4.94:1 (AA at 12px/600). */ --warn-text: #7F5E14; --warn-bg: #F4F0E6; --warn-strong: #BC8C22; --med1-text: #6C684A; --med1-bg: #F0F0EA; --med1-strong: #97925F; --med2-text: #7F5E14; --med2-bg: #F4F0E6; --med2-strong: #BC8C22; --med3-text: #8C5322; --med3-bg: #F5EDE6; --med3-strong: #BC7739; /* ------------------------------------------------------- ELEVATION ----- Shadow ink follows the cool scrim (v1 used a warm brown-black). */ --shadow-overlay: 0 4px 16px rgba(23, 27, 32, 0.10); --shadow-modal: 0 12px 32px rgba(23, 27, 32, 0.16); /* Legacy alias with a literal value — the var()-based aliases need nothing. Navy retune 2026-09-10: follows the brand back to the v1 navy step. */ --navy-light: #2E5580; } /* ------------------------------------------------------ v2 · DARK -------- The dark tune the preview block deferred ("dark frames keep the v1.0 dark tokens; dark tune follows adoption"). Derived cool-neutral analogue of the v2 light set — see the handoff: derived, not board-approved pixel-for-pixel. */ :root[data-tokens="v2"][data-theme="dark"] { --bg: #15181C; --surface: #1D2126; --surface-wash: #23272D; --row-hover: #272C32; --hairline: #31363D; --hairline-strong: #424951; --scrim: rgba(0, 0, 0, 0.55); --text-main: #E4E7EB; --text-muted: #9AA2AC; --text-faint: #727A84; /* Navy retune 2026-09-10 (PO): ink lightens off the navy hue for dark contrast (#8FB3DC on #1D2126 ≈ 8.9:1); fill deepens into slate-navy. */ --brand-ink: #8FB3DC; --brand-fill: #223C5E; --brand-fill-hover: #2B4A73; --brand-wash: #1C2A3D; --focus-ring: rgba(143, 179, 220, 0.42); --ok-text: #8FD8AE; --ok-bg: #1C3227; --ok-strong: #3FA96D; --danger-text: #F0A79D; --danger-bg: #3A2523; --danger-strong: #D3554A; --neutral-text: #9AA2AC; --neutral-bg: #272C32; --neutral-strong: #7C848E; --info-text: #9CC2F5; --info-bg: #1B2A40; --info-strong: #5E9BE6; --violet-text: #C3AEEA; --violet-bg: #2B2440; --violet-strong: #9C7CDC; --warn-text: #D8BC7C; --warn-bg: #302F26; --warn-strong: #C29A45; --med1-text: #BEB897; --med1-bg: #2D2E27; --med1-strong: #97925F; --med2-text: #D8BC7C; --med2-bg: #302F26; --med2-strong: #C29A45; --med3-text: #E0AE8B; --med3-bg: #352E27; --med3-strong: #BE8250; --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.55); --navy-light: #35618F; /* navy retune 2026-09-10 */ } /* ---- v2.1 COMPLETE — the Conditional Design Gate is CLEARED (2026-08-01) ----- Andrew picked option A (harmonised) on the A/B board; every v2 semantic family is now rebuilt on the cool base. Modules using the medical semantic tiers MAY adopt data-tokens="v2" — the Notes and Calendar visual migrations are unblocked. Adoption is per-module and belongs to those lanes; this file opts nothing in. Spacing scale, hit targets, motion, z-index: unchanged by design — v2 is a colour/type/radius pass, not a layout pass. -------------------------------------------------------------------------- */