/* ============================================================================ TMA DESIGN SYSTEM — TOKENS Ported 1:1 from the design prototype's assets/css/tokens.css under the §3 fidelity mandate (PORT-BACK-BRIEF, owner ruling 2026-08-07). One source of truth for both themes. Light is the DEFAULT; dark applies via [data-theme="dark"] on . Every color pair below is measured >= 4.5:1 (WCAG 2.2 AA, normal text) against the surfaces it is used on — the measured table lives in the design repo's docs/DESIGN-SYSTEM.md §1 and is asserted by ShellDesignTokensTests, so a "corrected" value fails the build rather than quietly dropping safety copy under the floor. Do not introduce one-off values on screens: if a value is missing here, add the token first. ========================================================================== */ :root { /* ---- brand identity (theme-independent) -------------------------------- */ --brand-dark-blue: #2C3E50; --brand-blue: #2980B9; /* identity hue — large type, icons, fills only */ --brand-blue-strong: #1F6E9C; /* filled buttons w/ white text — 5.6:1 AA */ --brand-teal: #33CCCC; --brand-grey: #ECF0F1; --brand-red: #CC3333; /* ---- THE type scale — 12.8/14/16/20/24/32/48, one scale app-wide ------- */ --t-cap: .8rem; /* 12.8 — small-caps eyebrows, badges, fine labels */ --t-14: .875rem; /* 14 — fine print, caps section heads, metadata */ --t-16: 1rem; /* 16 — body base (never smaller for essentials) */ --t-20: 1.25rem; /* 20 — card titles, rail heads, menu item names */ --t-24: 1.5rem; /* 24 — sub-area headings */ --t-32: 2rem; /* 32 — area h1 / page title */ --t-48: 3rem; /* 48 — display */ --t-display: clamp(2.6rem, 9vw, 5.2rem); /* wall display only */ /* leading by role — body 150%, headings 115%, display 105% */ --lh-body: 1.5; --lh-heading: 1.15; --lh-display: 1.05; --lh-compact: 1.35; /* dense interface text (tables, chips) */ /* tracking */ --track-eyebrow: .22em; /* small caps eyebrows */ --track-caps-head: .14em; /* caps section heads */ --track-display: -.02em; --track-h1: -.01em; /* R11 — direction sign: 1 in LTR, -1 under RTL. Physical transforms that must flip with the writing direction (drawer slides, switch knob) multiply by this instead of forking rules per direction. */ --flip: 1; /* ---- spacing — 8px scale + 4px sub-grid for micro only ------------------ */ --sp-0: 0; --sp-1: 4px; /* micro: icon<->label, chip padding tweaks, optical fixes */ --sp-2: 8px; --sp-3: 12px; /* micro: label<->control, heading<->lede */ --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; /* semantic spacing — describe the relationship, not the number */ --sp-icon-text: 8px; /* inline icon <-> its label */ --sp-label-control: 8px; /* form label <-> its field */ --sp-control-help: 8px; /* field <-> helper/validation text */ --sp-field-field: 24px; /* between form fields */ --sp-related: 12px; /* items inside one group */ --sp-card-pad: 20px; /* inside a card */ --sp-card-gap: 16px; /* card <-> card in a grid/rail */ --sp-section: 36px; /* between sections (macro whitespace) */ --sp-modal-pad: 24px; --sp-nav-item: 4px; /* between nav rows */ --sp-table-cell-x: 16px; --sp-table-cell-y: 12px; /* heading rhythm — gap ~ 1.5–2x the smaller heading's size */ --gap-eyebrow: 8px; /* eyebrow -> h1 (grouped, tight) */ --gap-lede: 12px; /* h1 -> its lede (same group) */ --gap-after-head: 36px; /* area head block -> first section */ --gap-caps-head: 14px; /* caps section head -> its grouped content */ /* ---- one width system --------------------------------------------------- */ --w-reading: 820px; /* every list / reading area */ --w-narrow: 480px; /* quiet forms */ --w-wide: 1600px; /* the wall */ --w-line: 66ch; /* prose measure — 45–75ch band */ /* ---- shape & chrome ------------------------------------------------------ */ --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --gutter: 20px; --appbar-h: 56px; --bottomnav-h: 60px; --touch: 44px; /* minimum touch target */ --btn-h: 44px; /* ONE button height per row context */ --btn-h-sm: 36px; /* compact table/inline actions only */ /* ---- z ladder ------------------------------------------------------------ */ --z-rail: 30; --z-appbar: 40; --z-bottomnav: 40; --z-drawer: 60; --z-dialog: 70; --z-popover: 80; --z-modal: 85; /* the walkthrough tour — above popovers, below toasts */ --z-toast: 90; /* ---- motion --------------------------------------------------------------- */ --ease: cubic-bezier(.2, .7, .3, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 420ms; /* ---- type family — the ONE UI family (DESIGN-SYSTEM §2) ------------------- The prototype sets this to the bare system stack and notes "no network fonts", which is right for a local prototype with no brand face loaded. §2 states what happens here instead: "the brand webfont slots in at port time WITHOUT CHANGING ANY TOKEN NAME." This platform's brand face is Noto Sans — already loaded by App.razor and already pinned in TmaTheme, which is what every MudBlazor component renders in. So Noto Sans leads, and the prototype's stack stays as the fallback chain verbatim. Leaving the token as the bare system stack would NOT have been the faithful choice: it would put design-layer text in Segoe UI beside MudBlazor text in Noto Sans — two families on one page, which is the one thing §2 actually forbids. ShellDesignTokensTests binds this to TmaTheme so the two cannot drift apart again. */ --font-ui: "Noto Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-num: var(--font-ui); /* prices/tabular figures via font-variant */ /* authored grain texture — inline SVG turbulence, no network */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (min-width: 768px) { :root { --gutter: 32px; } } @media (min-width: 1280px) { :root { --gutter: 48px; } } /* R11 — direction + script-aware type (per-language token overrides). Arabic: ANY positive tracking breaks cursive letter joining — every tracking token zeroes (a component-literal kill rule rides in base.css). Devanagari/Arabic: tall matras + deep descenders clip at heading leading. CJK + Devanagari: 12.8px caps-size is below comfortable glyph complexity — floor at 14px. Negative display tracking also zeroes for these scripts. */ :root[dir="rtl"] { --flip: -1; } :root[lang="ar"] { --track-eyebrow: 0; --track-caps-head: 0; --track-display: 0; --track-h1: 0; } :root[lang="ar"], :root[lang="hi"] { --lh-heading: 1.3; --lh-display: 1.2; --lh-compact: 1.5; } :root[lang="hi"], :root[lang="ja"], :root[lang="ko"], :root[lang="zh"] { --t-cap: .875rem; --track-display: 0; --track-h1: 0; } /* ============================================================================ LIGHT THEME (default — owner ruling 2026-07-10 #34) ========================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; /* surface ladder */ --bg: #F8FBFC; --bg-2: #EFF4F7; --surface: #FFFFFF; --surface-2: #F3F7FA; /* nested/inset regions on a card */ --hairline: rgba(22, 33, 44, .10); --hairline-strong: rgba(22, 33, 44, .18); --line: rgba(22, 33, 44, .18); /* dividers/borders — alias of hairline-strong */ --scrim: rgba(22, 33, 44, .45); /* ink ramp — 16.3 / 7.6 / 5.0 on surface */ --ink-1: #16212C; --ink-2: #43566A; --ink-3: #5E7183; --ink-inverse: #EDF2F6; /* accent — identity hue for large/graphics; -fg carries normal text (AA) */ --accent: #2980B9; /* >=3:1 — large text, icons, borders, fills */ --accent-fg: #1F6E9C; /* 5.6:1 — links, normal-size accent text */ --accent-strong: #1F6E9C; /* filled buttons, white label 5.6:1 */ --accent-on-strong: #FFFFFF; --accent-soft: #E3F0F8; /* tinted chip/selection background */ --eyebrow: #0E7C7C; /* teal eyebrow, 5.0:1 on white */ /* verdicts — safety-critical */ --safe: #15803D; /* 5.0:1 */ --unsafe: #B91C1C; /* 6.5:1 */ --removable: #B45309; /* 5.0:1 */ /* celebration accents (G22) — decorative confetti, per-theme like everything */ --cele-1: #3B6FD4; --cele-2: #C77D14; --cele-3: #C2417F; --unverified: #5C6672; /* 5.8:1 */ --safe-soft: #E8F5EC; --unsafe-soft: #FBEAEA; --removable-soft: #F9EFE2; --unverified-soft: #EDEFF2; /* status */ --warn: #B45309; --error: #B91C1C; --success: #15803D; --info: #1F6E9C; /* include/exclude chips (legacy-parity colors on brand) */ --chip-include-bg: #E3F0F8; --chip-include-fg: #1F6E9C; --chip-include-line: #9CC4DE; --chip-exclude-bg: #FBEAEA; --chip-exclude-fg: #B91C1C; --chip-exclude-line: #E3A6A6; /* elevation ladder — soft, layered (material surfaces) */ --elev-1: 0 1px 2px rgba(22,33,44,.06), 0 8px 24px -18px rgba(22,33,44,.22); --elev-2: 0 2px 4px rgba(22,33,44,.07), 0 14px 32px -18px rgba(22,33,44,.26); --elev-3: 0 6px 12px rgba(22,33,44,.09), 0 24px 48px -20px rgba(22,33,44,.30); --elev-4: 0 10px 20px rgba(22,33,44,.12), 0 24px 48px -12px rgba(22,33,44,.30); --grain-opacity: .04; --skeleton-base: #E8EEF2; --skeleton-sheen: #F6FAFC; /* themed chevron for ALL select fields (background-image can't use currentColor) */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343566A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* ============================================================================ DARK THEME — Variant B editorial surfaces; every pair measured AA Two selectors, ONE block, deliberately. `:root[data-theme="dark"]` is the design's own contract. `body.theme-dark` is the scope the already-shipped admin.css dark chrome keys off — the platform's ThemeModeProviderHost has mirrored the resolved dark flag onto the body since FB-71, and dropping it would resolve every one of those overrides against LIGHT tokens. Listing both on one block keeps a single source; duplicating the values would be two sources that drift. ========================================================================== */ :root[data-theme="dark"], body.theme-dark { color-scheme: dark; --bg: #111B28; --bg-2: #0B131D; --surface: #182535; --surface-2: #1E2E42; --hairline: rgba(236, 240, 241, .12); --hairline-strong: rgba(236, 240, 241, .22); --line: rgba(236, 240, 241, .22); --scrim: rgba(4, 8, 12, .62); /* ink ramp — 13.8 / 8.9 / 5.2 on surface */ --ink-1: #EDF2F6; --ink-2: #B9C6D3; --ink-3: #8598A9; --ink-inverse: #16212C; /* accent — lightened companions, measured on the dark ladder */ --accent: #33CCCC; /* identity teal reads as the dark-mode accent */ --accent-fg: #6FB9E8; /* 7.2:1 on surface — links, accent text */ --accent-strong: #1F6E9C; /* filled buttons identical across themes */ --accent-on-strong: #FFFFFF; --accent-soft: rgba(111, 185, 232, .14); --eyebrow: #33CCCC; /* 7.9:1 on surface */ /* verdicts — dark companions (7.7–9.7:1 on surface) */ --safe: #57D98A; --unsafe: #FF8B8B; --removable: #F5B04A; --cele-1: #7AA7FF; --cele-2: #F5B04A; --cele-3: #E86FA4; --unverified: #A7B2BE; --safe-soft: rgba(87, 217, 138, .13); --unsafe-soft: rgba(255, 139, 139, .13); --removable-soft: rgba(245, 176, 74, .13); --unverified-soft: rgba(167, 178, 190, .13); --warn: #F5B04A; --error: #FF8B8B; --success: #57D98A; --info: #6FB9E8; --chip-include-bg: rgba(111, 185, 232, .16); --chip-include-fg: #9CCDEE; --chip-include-line: rgba(111, 185, 232, .45); --chip-exclude-bg: rgba(255, 139, 139, .14); --chip-exclude-fg: #FFA8A8; --chip-exclude-line: rgba(255, 139, 139, .45); /* elevation — deeper shadows on dark */ --elev-1: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px -18px rgba(0,0,0,.55); --elev-2: 0 2px 4px rgba(0,0,0,.28), 0 18px 36px -18px rgba(0,0,0,.60); --elev-3: 0 6px 12px rgba(0,0,0,.32), 0 28px 56px -20px rgba(0,0,0,.65); --elev-4: 0 10px 20px rgba(0,0,0,.40), 0 24px 48px -12px rgba(0,0,0,.60); --grain-opacity: .05; --skeleton-base: #1E2E42; --skeleton-sheen: #27394F; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9C6D3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* Reduced motion — honor the OS setting everywhere */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }