/* ============================================================================ Sagix Design System — tokens.css Version 1.5 · production token source of record ---------------------------------------------------------------------------- Two axes, both attribute scopes: [data-theme="light" | "dark"] — authored independently [data-density="compact" | "comfortable"] — theme axis, not a component prop Defaults on :root are light + compact. Token names are the API. Renaming any name below is a MAJOR version. ========================================================================== */ :root { /* --- Brand (theme-invariant identity) --------------------------------- */ --color-brand-ink: #161616; --color-brand-accent: #E89B22; /* --- Type families ----------------------------------------------------- */ --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* --- Type scale (density-invariant) ------------------------------------ */ --text-display-lg-size: 48px; --text-display-lg-line: 52px; --text-display-lg-weight: 600; --text-display-lg-tracking: -0.028em; --text-display-size: 34px; --text-display-line: 40px; --text-display-weight: 600; --text-display-tracking: -0.022em; --text-h1-size: 24px; --text-h1-line: 32px; --text-h1-weight: 600; --text-h1-tracking: -0.012em; --text-h2-size: 19px; --text-h2-line: 26px; --text-h2-weight: 600; --text-h3-size: 16px; --text-h3-line: 22px; --text-h3-weight: 600; --text-body-lead-size: 16px; --text-body-lead-line: 27px; --text-body-lead-weight: 400; --text-body-size: 14px; --text-body-line: 22px; --text-body-weight: 400; --text-body-emph-weight: 500; --text-body-sm-size: 13px; --text-body-sm-line: 20px; --text-table-size: 13px; --text-table-line: 18px; --text-table-dense-size: 12px; --text-table-dense-line: 16px; --text-label-size: 12px; --text-label-line: 16px; --text-label-weight: 500; --text-caption-size: 11px; --text-caption-line: 15px; --text-overline-size: 11px; --text-overline-tracking: 0.12em; --text-mono-size: 11px; --text-mono-line: 15px; --text-kpi-size: 52px; --text-kpi-line: 52px; --text-kpi-weight: 600; --text-kpi-tracking: -0.03em; --text-kpi-unit-size: 24px; --numeric-tabular: tabular-nums; /* --- Spacing · 4px base ------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; /* --- Radii ------------------------------------------------------------- */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; /* --- Motion ------------------------------------------------------------ */ --motion-fast: 100ms; --motion-base: 150ms; --motion-slow: 200ms; --ease-standard: cubic-bezier(.2, 0, .2, 1); /* --- Grid & breakpoints ------------------------------------------------ */ --grid-columns: 12; --content-max: 1600px; --bp-sm: 768px; --bp-md: 1024px; --bp-lg: 1280px; --bp-xl: 1600px; } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } } /* ============================================================================ THEME · LIGHT (default, and the design target) ========================================================================== */ :root, [data-theme="light"] { --color-n-0: #FFFFFF; --color-n-25: #FCFCFD; --color-n-50: #F8F8FA; --color-n-100: #F1F2F4; --color-n-150: #E9EAEE; --color-n-200: #DFE1E6; --color-n-300: #C9CCD4; --color-n-400: #A8ACB6; --color-n-500: #878B96; --color-n-600: #62666F; --color-n-700: #4A4D55; --color-n-800: #33353B; --color-n-950: #161616; /* warm wells — the surviving ecru; never a page canvas */ --color-w-25: #FDFBF7; --color-w-50: #FBF7EF; --color-w-100: #F5EFE1; --color-w-200: #EFE7D6; /* surfaces */ --color-bg-canvas: var(--color-n-50); --color-bg-surface: var(--color-n-0); --color-bg-sunken: var(--color-n-100); --color-bg-well: var(--color-w-50); --color-bg-hover: var(--color-n-50); --color-bg-selected: #FDF3E4; --color-hairline: var(--color-n-150); --color-border: var(--color-n-200); --color-border-strong: var(--color-n-300); /* text — four steps, in this order, never skipped */ --color-text-primary: var(--color-n-950); --color-text-secondary: var(--color-n-700); --color-text-tertiary: var(--color-n-600); --color-text-muted: var(--color-n-500); --color-text-inverse: var(--color-n-25); /* brand accent */ --color-accent: #E89B22; --color-accent-hover: #D18C1C; --color-accent-press: #B87817; --color-accent-bg: #FDF3E4; --color-accent-border: #F3D2A0; --color-accent-text: #8F4E04; /* 6.6:1 on n-0 — readable saffron */ --color-on-accent: #161616; /* 7.9:1 on accent */ /* semantic · success */ --color-success-bg: #E9F6EF; --color-success-border: #B9E2CB; --color-success-text: #0E6B41; /* 6.6:1 */ --color-success-emph: #12885A; /* semantic · warning (amber — separable from brand saffron) */ --color-warning-bg: #FCF6E4; --color-warning-border: #E7D49A; --color-warning-text: #7A5B02; /* 6.4:1 */ --color-warning-emph: #C99A0B; /* semantic · danger */ --color-danger-bg: #FDECEA; --color-danger-border: #F5C4BE; --color-danger-text: #A32B22; /* 6.2:1 */ --color-danger-emph: #C43B30; --color-on-danger: #FFFFFF; /* semantic · info */ --color-info-bg: #ECF3FA; --color-info-bg-strong: #DCEAF7; --color-info-bg-inflight: #F5F8FC; --color-info-border: #BCD7EE; --color-info-border-strong: #8FB9DC; --color-info-text: #15537F; /* 7.3:1 */ --color-info-emph: #1F6FB2; /* aging heatmap · one warm sequence, five steps */ --color-heat-0: #F1F2F4; --color-heat-1: #FDF3E4; --color-heat-2: #FBE7C8; --color-heat-3: #F6D3AB; --color-heat-4: #EDBE85; --color-heat-5: #C43B30; /* elevation — cool blue-black, low opacity; never with a border */ --elev-0: none; --elev-1: 0 1px 2px rgba(18, 22, 31, .05); --elev-2: 0 1px 2px rgba(18, 22, 31, .05), 0 4px 12px rgba(18, 22, 31, .06); --elev-3: 0 2px 4px rgba(18, 22, 31, .06), 0 14px 34px rgba(18, 22, 31, .11); /* scrim — the ink behind a modal. It was REFERENCED by AU-04's ask-for-evidence modal and never defined, so that dialog opened over an untinted room: the layer below stayed fully legible and the modal read as a floating card rather than a mode. Same elevation ink as the shadows, at the opacity a dialog needs to own the screen without hiding what it interrupted. */ --color-scrim: rgba(18, 22, 31, .38); /* focus — two-ring shadow; survives overflow:hidden */ --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-accent); --focus-ring-width: 2px; --focus-ring-color: var(--color-accent); color-scheme: light; } /* ============================================================================ THEME · DARK (authored, not derived; elevation is surface steps, not shadow) ========================================================================== */ [data-theme="dark"] { --color-d-canvas: #0D0E10; --color-d-50: #121417; --color-d-100: #16181B; --color-d-150: #1D2024; --color-d-200: #24272C; --color-d-300: #2E3238; --color-d-400: #3D424A; --color-d-500: #565C66; --color-d-600: #767C87; --color-d-700: #A2A8B2; --color-d-800: #CBD0D7; --color-d-900: #EEF0F3; --color-d-1000: #FFFFFF; --color-bg-canvas: var(--color-d-canvas); --color-bg-surface: var(--color-d-100); --color-bg-sunken: var(--color-d-50); --color-bg-well: var(--color-d-150); --color-bg-hover: var(--color-d-150); --color-bg-selected: #2A1F0A; --color-hairline: var(--color-d-150); --color-border: var(--color-d-300); --color-border-strong: var(--color-d-400); --color-text-primary: var(--color-d-900); /* 15.1:1 on surface */ --color-text-secondary: var(--color-d-700); /* 7.4:1 */ --color-text-tertiary: var(--color-d-700); --color-text-muted: var(--color-d-600); /* 4.6:1 — muted floor */ --color-text-inverse: var(--color-n-950, #161616); --color-accent: #E89B22; --color-accent-hover: #F2AE45; --color-accent-press: #C98518; --color-accent-bg: #2A1F0A; --color-accent-border: #4D3A11; --color-accent-text: #F2AE45; --color-on-accent: #161616; --color-success-bg: #0F2419; --color-success-border: #1F4433; --color-success-text: #6FD39B; /* 9.0:1 */ --color-success-emph: #2FA36A; --color-warning-bg: #241E08; --color-warning-border: #4A3F12; --color-warning-text: #E3C55F; /* 9.1:1 */ --color-warning-emph: #C99A0B; --color-danger-bg: #2A1513; --color-danger-border: #55231F; --color-danger-text: #F19B92; /* 8.1:1 */ --color-danger-emph: #E0574B; --color-on-danger: #161616; --color-info-bg: #0F2130; --color-info-bg-strong: #14293A; --color-info-bg-inflight: #101A22; --color-info-border: #1E3D53; --color-info-border-strong: #2E5B7E; --color-info-text: #8CC0E6; /* 8.6:1 */ --color-info-emph: #3E88C4; --color-heat-0: #1D2024; --color-heat-1: #24201A; --color-heat-2: #2A1F0A; --color-heat-3: #3B2A0C; --color-heat-4: #4D3A11; --color-heat-5: #E0574B; /* dark separates planes with surface steps, not shadow — so the scrim carries the whole separation and goes heavier than in light. */ --color-scrim: rgba(0, 0, 0, .58); /* dark raises with surface steps; shadow tokens resolve to none */ --elev-0: none; --elev-1: none; --elev-2: none; --elev-3: none; --surface-step-1: var(--color-d-150); --surface-step-2: var(--color-d-200); --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px #F2AE45; --focus-ring-color: #F2AE45; color-scheme: dark; } /* ============================================================================ DENSITY · COMPACT (default; never offered below 1024px) ========================================================================== */ :root, [data-density="compact"] { --row-height: 32px; --cell-pad-y: 6px; --cell-pad-x: 8px; --control-height: 28px; --control-pad-x: 10px; --card-pad: 16px; --stack-gap: 8px; --grid-gutter: 16px; --table-font-size: var(--text-table-dense-size); --table-font-line: var(--text-table-dense-line); --hit-target-min: 28px; /* extended invisible hit area keeps 44px on touch */ } /* ============================================================================ DENSITY · COMFORTABLE (tablets, and people who ask for it) ========================================================================== */ [data-density="comfortable"] { --row-height: 44px; --cell-pad-y: 12px; --cell-pad-x: 12px; --control-height: 36px; --control-pad-x: 14px; --card-pad: 24px; --stack-gap: 16px; --grid-gutter: 24px; --table-font-size: var(--text-table-size); --table-font-line: var(--text-table-line); --hit-target-min: 36px; } /* Below the md breakpoint compact is not available. */ @media (max-width: 1023px) { :root, [data-density="compact"] { --row-height: 44px; --cell-pad-y: 12px; --cell-pad-x: 12px; --control-height: 36px; --control-pad-x: 14px; --card-pad: 24px; --stack-gap: 16px; --table-font-size: var(--text-table-size); --table-font-line: var(--text-table-line); --hit-target-min: 36px; } } /* ============================================================================ v1.2 ADDITIONS · additive only. No v1.1 property above changed value. ========================================================================== */ /* A document plate is PAPER in both themes. These four do NOT invert: the watermarked viewer, audit-pack previews and the auditor microsite render the same sheet whichever theme the chrome is in. */ :root, [data-theme="light"], [data-theme="dark"] { --color-paper: #FFFFFF; --color-paper-ink: #161616; /* 18.1:1 on paper */ --color-paper-ink-muted: #4A4D55; /* 8.4:1 on paper — attribution lines */ --color-paper-stamp-ink: rgba(22, 22, 22, 0.13); /* watermark stamp alpha */ } :root, [data-theme="light"] { --color-danger-ink: #FFFFFF; /* 5.2:1 on --color-danger-emph */ --color-text-muted-on-sunken: var(--color-n-600); /* 5.1:1 on --color-bg-sunken */ } [data-theme="dark"] { --color-danger-ink: #161616; /* 4.9:1 on --color-danger-emph */ --color-text-muted-on-sunken: #7F858F; /* 5.0:1 on --color-bg-sunken */ } /* ============================================================================ v1.3 ADDITIONS · additive, plus the TWO ink adjustments that items 1 and 2 document. They are written here as overrides rather than edited in place, so the v1.2 → v1.3 diff is one contiguous block and every changed value sits beside the finding that changed it. No name above is renamed or removed. ========================================================================== */ /* --- ITEM 1 · layer 2 · tertiary and secondary DIVERGE in dark ------------- CT-5: in v1.2 dark, --color-text-tertiary and --color-text-secondary both resolved to d-700 #A2A8B2, so two chips separated only by that step painted identical ink. Light has always separated them (n-700 / n-600); dark now does too, via one new ramp step between d-600 and d-700. DECISION: they diverge. A four-step ladder that collapses to three in one theme is not a ladder — it is a light-only ladder with a dark alias. */ [data-theme="dark"] { --color-d-650: #8B919B; --color-text-tertiary: var(--color-d-650); /* 5.61:1 on surface · 5.82:1 on sunken · 5.16:1 on well */ } /* --- ITEM 2 · dark muted lifted to clear 4.5:1 on --color-bg-surface ------- B38 erratum: v1.2 fixed muted on SUNKEN by adding --color-text-muted-on-sunken and left the muted step itself at #767C87 — 4.24:1 on --color-bg-surface, 183 elements on RQ-02 alone. The floor moves rather than a second pair token being added: a muted step that fails on the commonest surface in the product is not a muted step. --color-text-muted-on-sunken is untouched (no regression: it still measures 4.97:1, and the lifted muted measures 4.91:1 on sunken). Standing rule, unchanged from v1.2: muted is never body text, and in dark it is not permitted on --color-bg-well (4.35:1) — use --color-text-tertiary. */ [data-theme="dark"] { --color-text-muted: #7E848F; /* 4.73:1 on surface · 4.91:1 on sunken */ } /* --- ITEM 1 · layer 1 · INCIDENT_SEV gets its own paint family ------------- Severity borrowed the danger/warning/neutral trios in v1.2, which are the trios TIER_META already uses: p2 painted as t3, p3 as t2, p4 as t1. Severity now owns three trios of its own — deeper and warmer than the tier family in light, higher-contrast in dark — and its chips are boxed, not pilled. */ :root, [data-theme="light"] { --color-sev-hi-bg: #F8DAD5; --color-sev-hi-border: #E79B90; --color-sev-hi-text: #8C2119; /* 6.81:1 on sev-hi-bg */ --color-sev-mid-bg: #FBEDCB; --color-sev-mid-border: #E0BE6A; --color-sev-mid-text: #6B4A02; /* 6.94:1 on sev-mid-bg */ --color-sev-low-bg: var(--color-bg-surface); --color-sev-low-border: var(--color-border-strong); --color-sev-low-text: var(--color-text-tertiary); /* 5.75:1 on surface */ } [data-theme="dark"] { --color-sev-hi-bg: #3A1A16; --color-sev-hi-border: #7A3029; --color-sev-hi-text: #FFB3A9; /* 9.16:1 on sev-hi-bg */ --color-sev-mid-bg: #322A08; --color-sev-mid-border: #6B5A14; --color-sev-mid-text: #F2D97A; /* 10.19:1 on sev-mid-bg */ --color-sev-low-bg: var(--color-bg-surface); --color-sev-low-border: var(--color-border-strong); --color-sev-low-text: var(--color-text-tertiary); /* 5.61:1 on surface */ } /* ============================================================================ v1.4 ADDITIONS · additive, plus the ONE ink adjustment item 1 documents and the ONE chip family item 2 adds. Same shape as the v1.3 block: overrides at the end of the file, each value beside the finding that changed it. Nothing above is renamed, removed or re-pointed, and NO DARK VALUE MOVES in this release — every dark figure printed in the v1.3 block still measures what it says it does. ========================================================================== */ /* --- ITEM 1 · LIGHT muted lifted to clear 4.5:1 on --color-bg-surface ------- CT-nano, and a pre-v1.3 miss: light --color-text-muted resolved to n-500 #878B96 = 3.41:1 on --color-bg-surface — failing since v1.0, on the same dense rows (RQ-02 request board) that item 2 of v1.3 fixed in dark. v1.3 moved the dark floor and left light untouched because the sunken pair token masked it; the surface case was never measured. Same solution shape as dark: THE FLOOR MOVES, the pair token is untouched. before → after, light --color-text-muted: on --color-bg-surface 3.41:1 → 4.88:1 (clears) on --color-bg-sunken 3.04:1 → 4.36:1 (still under floor — see below) on --color-bg-well 3.19:1 → 4.57:1 (clears; light diverges from dark here, where muted stays barred on well at 4.35:1) --color-text-muted-on-sunken is byte-untouched at n-600 #62666F = 5.14:1 and REMAINS MANDATORY on sunken in light: the lifted muted reaches 4.36:1 there, which is better but still short, exactly as in dark. Standing rule unchanged: muted is never body text. */ :root, [data-theme="light"] { --color-text-muted: #6D717C; /* 4.88:1 on surface · 4.57:1 on well · 4.36:1 on sunken (use the pair token there) */ } /* --- ITEM 2 · INACTIVE IS NOT CLOSED · Decision 58 ------------------------- CT-nano: in light, STAFF_STATUS.inactive resolved bg --color-bg-sunken #F1F2F4 + fg --color-text-muted-on-sunken #62666F — EXACTLY STATE_META.closed (#F1F2F4 / #62666F). Two chips from two different vocabularies painted the same pixels; the dashed border was the only separator, and identical-colour separation carried by a border alone is the weakest distinguishability this DS ships anywhere. (Dark had already diverged, at v1.3 item 1: closed reads tertiary d-650 #8B919B, inactive reads muted-on-sunken #7F858F.) DECISION 58: inactive DIVERGES in light — one visible step on plate AND ink — rather than border-as-separator being canonised. Staff status gets its own three tokens so no other family can drift onto them. plate #DFE1E6 (= n-200) vs sunken #F1F2F4: 1.00:1 → 1.17:1, at the 1.20:1 hairline-on-surface separation this DS already relies on to be seen ink #5A5E67 on that plate: 4.97:1 (clears the 4.5:1 floor); 1.13:1 against closed's #62666F — a read step, not a repaint border --color-border-strong #C9CCD4 = 1.23:1 on the plate; --color-border IS n-200, so on this plate it would have measured 1.00:1 — invisible DARK IS BYTE-UNTOUCHED: the dark values below resolve to the same three colours dark rendered at v1.3 (#121417 / #7F858F / #2E3238). */ :root, [data-theme="light"] { --color-staff-inactive-bg: var(--color-n-200); /* #DFE1E6 · 1.17:1 off sunken */ --color-staff-inactive-text: #5A5E67; /* 4.97:1 on the plate */ --color-staff-inactive-border: var(--color-border-strong); } [data-theme="dark"] { --color-staff-inactive-bg: var(--color-bg-sunken); /* #121417 — unchanged */ --color-staff-inactive-text: var(--color-text-muted-on-sunken); /* #7F858F · 4.97:1 — unchanged */ --color-staff-inactive-border: var(--color-border); /* #2E3238 — unchanged */ } /* ============================================================================ v1.5 ADDITIONS · ONE item, ONE family: the TEMPLATE CHIP FAMILY (TPL-CT-1). Purely additive. No name above is renamed, removed or re-pointed, and NO VALUE ABOVE MOVES — v1.5 changes no light and no dark figure printed in the v1.2, v1.3 or v1.4 blocks. Everything below is a new --color-tpl-* token. Seeded by the local TPL_STATUS table borrowed on AD-10 and on Control Tower's Library authoring; those two borrows are what these tokens replace. ---------------------------------------------------------------------------- THE AXIS (DS-D59). Template lifecycle is its OWN axis. It is not STATE_META (a request state is a person owing a person) and it is never the severity scale (a template is not an outage). It carries five values in two classes: REGULATED BASELINE, settled-authoritative · library · released TENANT LIFECYCLE · draft → published → deprecated The two settled values read on the WARM (ecru) register, which no chip family owned before v1.5: the regulated library is paper, and paper is the DS's existing vocabulary for a document that is authoritative rather than active. The tenant values leave that register as they leave the baseline. ========================================================================== */ :root, [data-theme="light"] { /* library · settled-authoritative · warm w-100 plate, brown ink */ --color-tpl-library-bg: var(--color-w-100); /* #F5EFE1 · 1.15:1 off surface */ --color-tpl-library-text: #6A5320; /* 6.38:1 on the plate */ --color-tpl-library-border: #E0D2AE; /* 1.31:1 on the plate */ /* released · settled-authoritative, one step firmer · warm w-200 plate */ --color-tpl-released-bg: var(--color-w-200); /* #EFE7D6 · 1.07:1 off library's plate */ --color-tpl-released-text: #4A3A16; /* 8.95:1 on the plate · 1.50:1 off library's ink */ --color-tpl-released-border: #D5C49B; /* 1.40:1 on the plate · 1.15:1 off library's border */ /* draft · IN FLIGHT, and deliberately NOT the info-inflight trio (DS-D59) */ --color-tpl-draft-bg: #CFE3F5; /* 1.24:1 off --color-info-bg-inflight · 1.18:1 off requested's #ECF3FA */ --color-tpl-draft-text: #14507A; /* 6.49:1 on the plate */ --color-tpl-draft-border: #7FAFD6; /* 1.77:1 on the plate · 1.56:1 off --color-info-border */ /* published · the tenant's own template is live and instantiable */ --color-tpl-published-bg: #CBE9D8; /* 1.17:1 off --color-success-bg */ --color-tpl-published-text: #0A5734; /* 6.67:1 on the plate · 1.32:1 off accepted's ink */ --color-tpl-published-border: #93CFB0; /* 1.37:1 on the plate · 1.26:1 off --color-success-border */ /* deprecated · retired, kept, never deleted · THREE-DELTA separated from BOTH STATE_META.closed AND staff-inactive — the figures are in §2.15 */ --color-tpl-deprecated-bg: #C4BEB0; /* 1.65:1 off closed · 1.42:1 off staff-inactive */ --color-tpl-deprecated-text: #3A362E; /* 6.49:1 on the plate · 2.09:1 off closed's ink · 1.85:1 off inactive's */ --color-tpl-deprecated-border: #9E968A; /* 2.23:1 off closed's border · 1.82:1 off inactive's */ /* THE FACT CLASS · tag silhouette (DS-D60): framework · applicability · version. Facts about a template, not states it is in, so they share one plate and are told apart by their word — the STAFF_ROLE precedent, not a new rule. */ --color-tpl-tag-bg: var(--color-bg-well); /* #FBF7EF · 1.07:1 off library's plate */ --color-tpl-tag-text: var(--color-text-secondary);/* #4A4D55 · 7.91:1 on the plate */ --color-tpl-tag-border: #E4DCC8; /* 1.28:1 on the plate — above the 1.20:1 hairline floor */ --color-tpl-tag-ink-strong: var(--color-text-primary); /* #161616 · 16.94:1 — applicability's ink, 2.14:1 off tag ink */ --color-tpl-tag-border-strong: #C9BFA4; /* 1.71:1 on the plate · 1.34:1 off the tag border */ /* version · ONE mono neutral style, no per-version colour */ --color-tpl-version-bg: var(--color-bg-surface); --color-tpl-version-text: var(--color-text-tertiary); /* #62666F · 5.75:1 on surface */ --color-tpl-version-border: var(--color-border); /* required · a MARKER, not a chip (DS-D61) */ --color-tpl-required-ink: var(--color-text-secondary); /* #4A4D55 · 8.45:1 on surface · 7.55:1 on sunken · 7.91:1 on well */ } [data-theme="dark"] { --color-tpl-library-bg: #221E16; --color-tpl-library-text: #D9C69B; /* 9.88:1 */ --color-tpl-library-border: #453C28; /* 1.53:1 on the plate */ --color-tpl-released-bg: #2A2417; /* 1.08:1 off library's plate */ --color-tpl-released-text: #E8D8AC; /* 10.89:1 · 1.19:1 off library's ink */ --color-tpl-released-border: #574A2C; /* 1.78:1 on the plate */ --color-tpl-draft-bg: #14293A; /* 1.18:1 off --color-info-bg-inflight */ --color-tpl-draft-text: #8CC0E6; /* 7.67:1 */ --color-tpl-draft-border: #2E5B7E; /* 2.07:1 on the plate */ --color-tpl-published-bg: #0F2B1D; /* 1.08:1 off --color-success-bg */ --color-tpl-published-text: #7FD9A8; /* 8.96:1 */ --color-tpl-published-border: #24543A; /* 1.74:1 on the plate */ --color-tpl-deprecated-bg: #2B2C30; /* 1.32:1 off dark closed AND dark staff-inactive (both #121417) */ --color-tpl-deprecated-text: #B9BCC4; /* 7.34:1 on the plate · 1.67:1 off closed's ink · 1.95:1 off inactive's */ --color-tpl-deprecated-border: #4A4D55; /* 1.65:1 on the plate · 1.52:1 off both #2E3238 borders */ --color-tpl-tag-bg: var(--color-bg-well); /* #1D2024 */ --color-tpl-tag-text: var(--color-text-secondary);/* #A2A8B2 · 6.84:1 */ --color-tpl-tag-border: var(--color-border); /* #2E3238 · 1.27:1 on the plate */ --color-tpl-tag-ink-strong: var(--color-text-primary); /* #EEF0F3 · 14.32:1 · 2.09:1 off tag ink */ --color-tpl-tag-border-strong: var(--color-border-strong);/* #3D424A · 1.62:1 on the plate */ --color-tpl-version-bg: var(--color-bg-surface); --color-tpl-version-text: var(--color-text-tertiary); /* #8B919B · 5.61:1 on surface */ --color-tpl-version-border: var(--color-border); --color-tpl-required-ink: var(--color-text-secondary); /* #A2A8B2 · 7.44:1 on surface */ }