/* ===================================================================== SIYA DESIGN TOKENS — the single source of truth for the interface. Load FIRST, before every other stylesheet. Rules for anyone editing this file: 1. Nothing in here may contain a selector other than :root / [data-*]. 2. No !important. Ever. This file wins by load order, not by force. 3. A colour that is not in this file does not exist in the product. Brand: clinical teal on a cool slate neutral ramp. Every text/background pair below is verified >= 4.5:1 (WCAG AA) by tests/theme/token_contrast_test.js, which parses THIS file. Light theme only. Dark mode was built and then removed at the clinic's request; do not reintroduce a second ramp without a full surface audit. ===================================================================== */ :root{ /* ---- neutral ramp (slate) ---------------------------------------- */ --s-n-0:#ffffff; --s-n-25:#fbfcfe; --s-n-50:#f6f8fb; --s-n-100:#eef2f7; --s-n-200:#e2e8f0; --s-n-300:#c3cedd; --s-n-400:#8493a9; --s-n-500:#5b6878; --s-n-600:#475569; --s-n-700:#334155; --s-n-800:#1e293b; --s-n-900:#0f172a; --s-n-950:#020617; /* ---- brand ramp (clinical teal, hue ~186) ------------------------ */ --s-brand-50:#edfafa; --s-brand-100:#d3f1f2; --s-brand-200:#a8e2e5; --s-brand-300:#71cbd0; --s-brand-400:#38aeb5; --s-brand-500:#1a9098; --s-brand-600:#0d7a82; --s-brand-700:#0e6369; --s-brand-800:#125055; --s-brand-900:#143f44; /* ---- status hues, deliberately >=40deg apart --------------------- */ /* info = indigo 244 | success = green 142 | warn = amber 35 | danger = red 0 */ --s-info-50:#eef2ff; --s-info-200:#c7d2fe; --s-info-600:#4338ca; --s-info-700:#3730a3; --s-ok-50:#f0fdf4; --s-ok-200:#bbf7d0; --s-ok-600:#15803d; --s-ok-700:#14532d; --s-warn-50:#fffbeb; --s-warn-200:#fde68a; --s-warn-600:#946806; --s-warn-700:#6f5205; --s-danger-50:#fef2f2; --s-danger-200:#fecaca;--s-danger-600:#b91c1c;--s-danger-700:#991b1b; /* ---- semantic surfaces ------------------------------------------ */ --s-bg-app:var(--s-n-50); --s-bg-surface:var(--s-n-0); --s-bg-raised:var(--s-n-0); --s-bg-sunken:var(--s-n-100); --s-bg-hover:var(--s-n-100); --s-bg-selected:var(--s-brand-50); --s-bg-disabled:var(--s-n-100); /* ---- semantic ink ------------------------------------------------ */ --s-ink-strong:var(--s-n-900); --s-ink-body:var(--s-n-800); --s-ink-muted:var(--s-n-500); --s-ink-subtle:var(--s-n-400); --s-ink-inverse:var(--s-n-0); /* Fixed white, in BOTH themes. Text sitting on a coloured fill - a primary button, a status chip, a dark header - must stay white when the theme flips, because the fill under it does not flip. Using --s-ink-inverse there would turn it dark-on-dark. */ --s-ink-on-accent:#ffffff; --s-surface-fixed-white:#ffffff; /* A dark surface that stays dark in both themes. The app uses #0f172a as a FILL in ~113 places with white text on top. Mapping that fill to the ink ramp turned it near-white in dark mode, leaving white text on white. A fill is not an ink and must not follow the ink ramp. */ --s-surface-inverse:#0f172a; --s-surface-inverse-hover:#1e293b; --s-ink-brand:var(--s-brand-700); --s-ink-disabled:var(--s-n-400); /* ---- semantic lines --------------------------------------------- */ --s-line-subtle:var(--s-n-100); --s-line-default:var(--s-n-200); --s-line-strong:var(--s-n-300); --s-line-brand:var(--s-brand-300); /* ---- interactive ------------------------------------------------- */ --s-action-bg:var(--s-brand-600); --s-action-bg-hover:var(--s-brand-700); --s-action-bg-active:var(--s-brand-800); --s-action-ink:var(--s-n-0); --s-action-quiet-ink:var(--s-brand-700); --s-action-quiet-bg:var(--s-brand-50); --s-focus-ring:0 0 0 3px rgba(13,122,130,.35); --s-focus-ring-danger:0 0 0 3px rgba(185,28,28,.30); /* ---- radius scale ------------------------------------------------ */ --s-r-xs:6px; --s-r-sm:8px; --s-r-md:10px; --s-r-lg:14px; --s-r-xl:18px; --s-r-full:999px; /* ---- density ------------------------------------------------------ comfortable = 1 (front desk, desktop) compact = .875 (dense tables, reports) chairside = 1.15 (tablet at the chair, gloved hands) */ --s-density:1; --s-sp-1:calc(4px * var(--s-density)); --s-sp-2:calc(8px * var(--s-density)); --s-sp-3:calc(12px * var(--s-density)); --s-sp-4:calc(16px * var(--s-density)); --s-sp-5:calc(20px * var(--s-density)); --s-sp-6:calc(24px * var(--s-density)); --s-sp-8:calc(32px * var(--s-density)); --s-sp-10:calc(40px * var(--s-density)); --s-control-h:calc(38px * var(--s-density)); --s-control-h-sm:calc(30px * var(--s-density)); --s-tap-min:calc(40px * var(--s-density)); /* ---- typography --------------------------------------------------- */ --s-font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --s-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* tabular numerals: money and tooth numbers must never jitter */ --s-num-tabular:"tnum" 1,"lnum" 1; --s-fs-11:calc(11px * var(--s-density)); --s-fs-12:calc(12px * var(--s-density)); --s-fs-13:calc(13px * var(--s-density)); --s-fs-14:calc(14px * var(--s-density)); --s-fs-16:calc(16px * var(--s-density)); --s-fs-18:calc(18px * var(--s-density)); --s-fs-22:calc(22px * var(--s-density)); --s-fs-28:calc(28px * var(--s-density)); --s-lh-tight:1.25; --s-lh-normal:1.5; --s-lh-loose:1.7; /* three weights. 800/850/900 are not design decisions, they are shouting. */ --s-fw-normal:400; --s-fw-medium:500; --s-fw-semibold:600; --s-fw-bold:700; /* ---- elevation ---------------------------------------------------- */ --s-sh-1:0 1px 2px rgba(15,23,42,.06); --s-sh-2:0 2px 8px rgba(15,23,42,.08); --s-sh-3:0 12px 32px rgba(15,23,42,.12); --s-sh-none:none; /* ---- motion ------------------------------------------------------- */ --s-dur-fast:120ms; --s-dur-base:200ms; --s-ease:cubic-bezier(.2,0,.2,1); color-scheme:light; } /* ---- density variants ------------------------------------------------ */ [data-density="compact"]{--s-density:.875;} [data-density="chairside"]{--s-density:1.15;} /* ---- print: always ink on paper ------------------------------------------- Resets every ramp for print. There is no dark theme any more, but the reset stays: eight stylesheets set print-color-adjust:exact, and any tint a future change adds to the screen ramp must never reach paper. */ @media print{ :root{ --s-n-0:#ffffff; --s-n-25:#ffffff; --s-n-50:#ffffff; --s-n-100:#f4f6f8; --s-n-200:#d9dee5; --s-n-300:#b9c1cc; --s-n-400:#8a94a3; --s-n-500:#5b6572; --s-n-600:#434c58; --s-n-700:#2c333d; --s-n-800:#1b2028; --s-n-900:#111418; --s-n-950:#000000; /* the brand and status ramps invert in dark too - reset them as well */ --s-brand-50:#edfafa; --s-brand-100:#d3f1f2; --s-brand-200:#a8e2e5; --s-brand-300:#71cbd0; --s-brand-400:#38aeb5; --s-brand-500:#1a9098; --s-brand-600:#0d7a82; --s-brand-700:#0e6369; --s-brand-800:#125055; --s-brand-900:#143f44; --s-info-50:#eef2ff; --s-info-200:#c7d2fe; --s-info-600:#4338ca; --s-info-700:#3730a3; --s-ok-50:#f0fdf4; --s-ok-200:#bbf7d0; --s-ok-600:#15803d; --s-ok-700:#14532d; --s-warn-50:#fffbeb; --s-warn-200:#fde68a; --s-warn-600:#946806; --s-warn-700:#6f5205; --s-danger-50:#fef2f2; --s-danger-200:#fecaca;--s-danger-600:#b91c1c;--s-danger-700:#991b1b; --s-action-ink:#ffffff; --s-surface-inverse:#111418; --s-sh-1:none; --s-sh-2:none; --s-sh-3:none; color-scheme:light; } } /* ---- respect reduced motion ------------------------------------------ */ @media (prefers-reduced-motion:reduce){ :root{--s-dur-fast:1ms;--s-dur-base:1ms;} }