/* ============================================================================ QUATRON BRAND TOKENS — V1.2 (CERTIFIED) Single visual source of truth. Mirrors the certified Brand System package 27-brand-tokens/quatron-brand-tokens.css. Do NOT hardcode brand values elsewhere — consume these variables. The Theme Engine and Design System read from this layer; components live in the Design System. Ref: QUATRON Brand Identity System / final-delivery / 27-brand-tokens ============================================================================ */ :root{ --qt-ink:#0D1420;--qt-blue:#2E5FE8;--qt-halo:#A8C2F5; --qt-neutral-50:#FBFCFE; --qt-neutral-100:#F3F5F9; --qt-neutral-200:#E5E9F0; --qt-neutral-300:#C9D0DC; --qt-neutral-400:#9AA4B5; --qt-neutral-500:#6B7689; --qt-neutral-600:#444E60; --qt-neutral-700:#2A3344; --qt-neutral-800:#171E2C; --qt-neutral-900:#0D1420; --qt-status-verified:#1E9E77; --qt-status-info:#2E5FE8; --qt-status-warning:#B9821D; --qt-status-destructive:#C63F3F; /* TEXT TIER. The status ramp above was drawn for fills, and as TEXT none of it clears the 4.5:1 WCAG AA threshold on every surface it lands on. Measured, as text: white soft neutral-100 verified 3.38 2.89 3.10 warning 3.35 2.83 3.07 destructive 5.02 4.10 4.60 info 5.36 4.41 4.91 Only info and destructive pass on white, and all four fail on their own soft tint. These are the same hues darkened until they clear 4.5:1 on EVERY surface they land on — not new colours, and not a replacement: the display tier is unchanged, because a fill or a border carries no contrast requirement and the brand green belongs there. A FOURTH surface was missed by the original calibration. Status chips do not use the -soft token; they mix their own display colour into the card at 16% (.qtr-ws-prod-st, .qtr-sig-badge, .qtr-trust-badge and the rest of that family). That tint is darker than -soft, and on it the previous inks measured verified 4.43, destructive 4.42, info 4.42 — three of four below AA, with warning surviving at 4.52. Only verified surfaced in the sweep, because only verified chips happened to render on the screens swept; the other three would have failed the moment such a chip appeared. So the fix is the whole family, not the one member that showed up. Darkened a further 2-4% and re-solved against the 18% tint as well, so a chip that goes a shade deeper still clears AA. Darkening only raises contrast on the lighter surfaces, so white / soft / neutral-100 all improve; the numbers below are re-measured, not carried over. Columns: white / soft / neutral-100 / 16% chip tint / 18% chip tint */ --qt-status-verified-text: #167558; /* 5.64 / 4.83 / 5.16 / 4.72 / 4.62 */ --qt-status-info-text: #2B59DA; /* 5.91 / 4.85 / 5.41 / 4.71 / 4.57 */ --qt-status-warning-text: #8A6116; /* 5.52 / 4.66 / 5.06 / 4.66 / 4.56 */ --qt-status-destructive-text: #B33939;/* 5.93 / 4.85 / 5.43 / 4.71 / 4.57 */ /* --qt-neutral-400 is 2.51:1 on white and is used as muted text; --qt-neutral-500 is 4.20:1 on neutral-100. The ramp itself is untouched — a neutral ramp needs its light steps. */ /* DARK-APPEARANCE INKS. Calibrated in platform-harmony.css against the dark surfaces and carried here unchanged, because a colour that lives only in a consumer stylesheet is a parallel token system by another name -- which is what the brand gate exists to prevent. Values are the ones already shipping, so nothing about the dark theme moves. */ --qt-status-verified-text-dark: #4FD1A5; /* 9.66 on --bg, 8.74 on surface */ --qt-status-warning-text-dark: #E3B155; /* 9.39 / 8.49 */ --qt-status-destructive-text-dark: #F08A8A; /* 7.65 / 6.92 */ --qt-status-info-text-dark: #8FB4FF; /* 7.44 on its own soft, 8.91 on --bg */ /* Badge fills are tinted, so body inks do not carry there: measured separately. */ --qt-badge-verified-text-dark: #6EE7BF; /* 6.23 / 6.87 */ --qt-badge-destructive-text-dark: #FF9B9B; --qt-neutral-text-strong-dark: #C3CAD6; /* 5.73 / 6.32 */ --qt-neutral-text-muted-dark: #A6AFBE; /* 4.27 / 4.71 */ --qt-neutral-text-secondary-dark: #949DAF; --qt-surface-soft-dark: #1E2637; /* --qt-text on it: 13.87 */ /* A deeper blue for the comparison canvas, which is permanently light whatever the theme. */ --qt-status-info-strong: #1E4BC8; --qt-neutral-text-tertiary: #5F6980; --qt-neutral-text-muted: #636C7E; /* 5.13 on white, 4.69 on neutral-100, 4.51 on #efefef */ --qt-neutral-text-subtle: #6A717D; /* 4.92 on white, 4.50 on neutral-100 */ /* Brand v1.2 — product accents are keyed by OFFICIAL PRODUCT CODE, not by a descriptive name. v1.1 used names ("hcm", "gold", "pos"), which drifted from the products they described: "gold" was Business Intelligence and "bi" was a different hue entirely. The code is the brand's own identifier, so a token cannot mean one thing here and another in the icon catalog. Source: 27-brand-tokens/quatron-brand-tokens.json color.product, names per 10-product-icons/official-icon-system-v1/ICON-CATALOG.md. */ --qt-product-qip:#4F46E5; /* Quatron Identity Platform — Indigo */ --qt-product-qoc:#2E5FE8; /* Quatron Organization Center — Blue */ --qt-product-qrp:#17A7C6; /* Quatron Reporting Platform — Cyan */ --qt-product-qdt:#1E9E77; /* Quatron Enterprise Document Trust — Emerald */ --qt-product-qhcm:#7C5CE0; /* Quatron Human Capital Management — Purple */ --qt-product-qpay:#2EAD70; /* Quatron Payroll — Green */ --qt-product-qfin:#E8792E; /* Quatron Finance — Orange */ --qt-product-qbpp:#1E9B9B; /* Quatron Business Partner Platform — Teal */ --qt-product-qcrm:#D85A8A; /* Quatron CRM — Pink */ --qt-product-qre:#8A5A44; /* Quatron Real Estate — Brown */ --qt-product-qinv:#D89A22; /* Quatron Inventory Management — Amber */ --qt-product-qproc:#D95D2B; /* Quatron Procurement — Deep Orange */ --qt-product-qsal:#D84A4A; /* Quatron Sales Management — Red */ --qt-product-qpos:#8A63D2; /* Quatron Point of Sale — Violet */ --qt-product-qmfg:#5B8DB8; /* Quatron Manufacturing — Steel Blue */ --qt-product-qpm:#294E8C; /* Quatron Project Management — Navy */ --qt-product-qam:#7E8F3A; /* Quatron Asset Management — Olive */ --qt-product-qms:#7A8494; /* Quatron Maintenance System — Gray */ --qt-product-qdms:#5F6B7A; /* Quatron Document Management System — Slate */ --qt-product-qbi:#C2812A; /* Quatron Business Intelligence — Gold */ --qt-product-qai:#1677FF; /* Quatron AI Platform — Electric Blue */ /* Platform components share one Neutral Slate: they are the platform, not products competing for recognition. color.platformComponent in the SOT. */ --qt-component-qsdk:#6B7689; --qt-component-qux:#6B7689; --qt-component-qnav:#6B7689; --qt-component-qauth:#6B7689; --qt-component-qtheme:#6B7689; --qt-component-qws:#6B7689; --qt-component-qcore:#6B7689; --qt-dataviz-1:#2E5FE8; --qt-dataviz-2:#1E9B9B; --qt-dataviz-3:#C2812A; --qt-dataviz-4:#8A63D2; --qt-dataviz-5:#D85A8A; --qt-dataviz-6:#5B8DB8; --qt-dataviz-7:#17A7C6; --qt-dataviz-8:#7E8F3A; --qt-font-latin:'IBM Plex Sans',system-ui,sans-serif; --qt-font-arabic:'Tajawal',sans-serif; --qt-font-mono:'IBM Plex Mono',monospace; /* Brand UI font stack (bilingual): Arabic-first, Latin fallback per brand book */ --qt-font-ui:'Tajawal','IBM Plex Sans',system-ui,'Segoe UI',Tahoma,sans-serif; --qt-radius-control:6px;--qt-radius-card:10px; /* radius.appIconRatio — corner radius as a fraction of tile size, for product icon tiles and app icons at any dimension. */ --qt-radius-app-ratio:.22; --qt-shadow-ambient:0 1px 2px rgba(13,20,32,.06), 0 8px 24px rgba(13,20,32,.08); --qt-motion-curve:cubic-bezier(.2,.8,.2,1); --qt-motion-fast:150ms;--qt-motion-base:300ms;--qt-motion-reveal:600ms; } /* Brand mode surfaces — bound to both [data-theme] (explicit) and [data-appearance] (the Theme Engine's resolved light/dark, incl. auto mode). */ [data-theme="light"],[data-appearance="light"]{ --qt-bg:#FBFCFE;--qt-surface:#FFFFFF;--qt-text:#171E2C;--qt-text-secondary:#444E60;--qt-border:#E5E9F0; } [data-theme="dark"],[data-appearance="dark"]{ --qt-bg:#0D1420;--qt-surface:#171E2C;--qt-text:#F3F5F9;--qt-text-secondary:#9AA4B5;--qt-border:#2A3344; }