/* ============================================================================ TESTORIA · TOKEN LAYER v1.0 ---------------------------------------------------------------------------- Level 1 — primitives: color as a fact (--blue-700, --ink-600) Level 2 — semantics: color as a role (--accent-action, --text-secondary) Components must reference ONLY level 2. This gives us: · dark theme — by overriding [data-theme="dark"] · Workspace branding — by overriding --accent-* on the container root · contrast fixes — in one file instead of eight Every text/background pair is checked against WCAG 2.1 AA. This file must be linked FIRST in the stylesheet chain. ========================================================================= */ :root { /* ══ 1. PRIMITIVES ════════════════════════════════════════════════════ */ /* Blue — the brand color. 500 is bright (fills/indicators), 650+ is the working range (text, fills under white text). */ --blue-50:#EEF5FF; --blue-100:#DCEAFF; --blue-200:#B9D6FF; --blue-300:#8FC0FF; --blue-400:#6FB0FF; --blue-500:#4B9FFF; --blue-600:#3C85ED; --blue-650:#2E74D6; --blue-700:#2C6CDC; --blue-800:#1F55B4; --blue-900:#163F86; /* The other three card colors. 500 — author's card color, 700 — readable on light backgrounds. */ --green-100:#E4F8F2; --green-500:#1CCD9D; --green-700:#0A7D5F; --amber-100:#FFF3DC; --amber-500:#FCAF2A; --amber-700:#8A5B00; --red-100:#FFECE8; --red-500:#FF6951; --red-700:#BE3A26; /* Neutrals */ --ink-900:#161E27; --ink-800:#232C38; --ink-700:#3A4354; --ink-600:#5F6B80; --ink-500:#8794A8; --ink-400:#AAB4C4; --ink-300:#D3D7DE; --ink-200:#E7EAF0; --ink-100:#F1F3F7; --ink-50:#F6F7F9; --white:#FFFFFF; /* Scrim for white text over the four author colors. 46% is the minimum at which white passes 4.5:1 on the LIGHTEST of the four (amber #FCAF2A → 5.0:1). Do not go below. */ --scrim:rgba(9,26,20,.48); /* ══ 2. SEMANTICS ═════════════════════════════════════════════════════ */ /* Surfaces */ --surface: var(--ink-50); --surface-raised: var(--white); --surface-sunken: var(--ink-100); --surface-inverse: var(--ink-900); --surface-overlay: rgba(22,30,39,.48); /* modal scrim, 48% */ /* Text */ --text-primary: var(--ink-900); /* 15.7:1 on surface */ --text-secondary: var(--ink-600); /* 5.0:1 on surface — AA */ --text-tertiary: var(--ink-500); /* 3.1:1 — ONLY >=18px or décor */ --text-disabled: var(--ink-400); --text-on-accent: var(--white); /* 4.6:1 on accent-action */ --text-on-soft: var(--blue-800); /* 6.3:1 on accent-soft */ --text-on-color: var(--white); /* >=5.0:1 when --scrim is present */ /* Accent. Workspace overrides THESE FOUR for its own branding. accent-action is the brand blue-500 by the owner's decision: the product has always used white text on #4B9FFF and keeps that look (contrast 2.7:1 is below AA — accepted deliberately, revisit if the brand shade changes). */ --accent: var(--blue-500); /* indicators, edge, meter fills */ --accent-action: var(--blue-500); /* fill under white text */ --accent-hover: var(--blue-600); --accent-soft: var(--blue-50); --accent-line: var(--blue-200); /* States. Each MUST be accompanied by an icon or text. */ --success:var(--green-700); --success-soft:var(--green-100); --success-mark:var(--green-500); --warning:var(--amber-700); --warning-soft:var(--amber-100); --warning-mark:var(--amber-500); --danger: var(--red-700); --danger-soft:var(--red-100); --danger-mark:var(--red-500); --info: var(--blue-700); --info-soft:var(--blue-50); --info-mark:var(--blue-500); /* Borders */ --border: rgba(22,30,39,.09); --border-strong: rgba(22,30,39,.16); --border-focus: var(--accent-action); /* Inactive tab-bar item — the app's BlueLight (Colors.xaml). Décor only: the active state carries the meaning, so contrast rules do not apply. */ --nav-inactive:#CFDBED; /* ══ 3. TYPOGRAPHY ════════════════════════════════════════════════════ */ --font-display:"Montserrat Alternates","Segoe UI",system-ui,sans-serif; --font-ui:"Mulish","Segoe UI",system-ui,-apple-system,sans-serif; /* Scale — 8 steps. Do not add more: every extra step breaks the rhythm. Base size is 16px on both mobile and desktop. */ --t-display:30px; --t-display-lh:1.15; /* h1 */ --t-title:22px; --t-title-lh:1.2; /* h2, large stat values */ --t-head:18px; --t-head-lh:1.3; /* h3, section heading */ --t-body:16px; --t-body-lh:1.55; /* body text */ --t-ui:15px; --t-ui-lh:1.4; /* buttons, menu items */ --t-sub:14px; --t-sub-lh:1.45; /* captions, metadata */ --t-cap:13px; --t-cap-lh:1.4; /* small captions, tags */ --t-micro:11px; --t-micro-lh:1.3; /* ALL-CAPS labels, badges */ --w-regular:400; --w-medium:500; --w-semi:600; --w-bold:700; --track-caps:.07em; /* tracking for all-caps */ --track-tight:-.01em; /* tracking for headings */ /* ══ 4. SPACE — 4px step, no exceptions ═══════════════════════════════ */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; /* Vertical rhythm */ --gap-item:8px; /* between homogeneous items */ --gap-block:16px; /* inside a block */ --gap-section:32px; /* between sections */ --gap-page:48px; /* between page zones */ /* ══ 5. SHAPE ═════════════════════════════════════════════════════════ */ --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-full:999px; /* One elevation scale. Do not mix with ad-hoc shadows. */ --elev-1:0 1px 2px rgba(22,30,39,.05); --elev-2:0 4px 16px rgba(22,30,39,.08); --elev-3:0 12px 32px rgba(22,30,39,.14); --edge:3px; /* the "facet" — brand device, see design system §5 */ --focus-ring:2px; /* ══ 6. TOUCH TARGETS ═════════════════════════════════════════════════ */ --tap-min:44px; /* absolute minimum for pointer:coarse */ --ctl-lg:48px; /* inputs, list rows */ --ctl-md:40px; /* default buttons */ --ctl-sm:36px; /* compact — only with pointer:fine */ /* ══ 7. MOTION ════════════════════════════════════════════════════════ */ --d-fast:120ms; /* press, hover */ --d-base:200ms; /* state change */ --d-slow:280ms; /* panel entrance */ --ease-out:cubic-bezier(.2,.8,.3,1); /* enter */ --ease-in:cubic-bezier(.4,0,.7,.2); /* exit */ /* ══ 8. LAYERS ════════════════════════════════════════════════════════ */ --z-base:0; --z-sticky:20; --z-header:40; --z-tabbar:50; --z-overlay:60; --z-modal:70; --z-toast:80; /* ══ 9. SHELL METRICS ═════════════════════════════════════════════════ */ /* --tabbar-h matches the app's TabBar minimum height (75). */ --nav-w:264px; --rail-w:76px; --header-h:64px; --tabbar-h:72px; /* Where anything sticky comes to rest: under the sticky header (its 1px border included) plus the shell's 20px grid gap. Panels using it never slide first. */ --sticky-top:calc(var(--header-h) + var(--s-5) + 1px); --content-max:1120px; --gutter:24px; color-scheme:light; } /* Compact controls grow to the tap minimum on touch screens. 16px inputs are mandatory: anything smaller makes iOS Safari zoom. */ @media (pointer:coarse) { :root{ --ctl-sm:44px; --ctl-md:44px; } } @media (max-width:767px) { :root{ --gutter:16px; --header-h:56px; --t-display:26px; --t-title:20px; } } /* Dark theme stub. Only level 2 changes — components stay untouched. TODO: values require a separate contrast pass before enabling. */ [data-theme="dark"] { --surface:#0F141A; --surface-raised:#161E27; --surface-sunken:#1C2530; --surface-inverse:var(--ink-50); --surface-overlay:rgba(0,0,0,.62); --text-primary:#EDF0F4; --text-secondary:#A9B4C4; --text-tertiary:#7C8798; --accent:var(--blue-400); --accent-action:var(--blue-400); --accent-hover:var(--blue-300); --accent-soft:rgba(75,159,255,.14); --accent-line:rgba(75,159,255,.32); --text-on-accent:#0F141A; --text-on-soft:var(--blue-300); --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18); --nav-inactive:#4E5359; color-scheme:dark; }