/* GENERATED FILE — DO NOT EDIT BY HAND. Source: syncera-design-system/package/src/tokens.css (v1.1.0). Regenerate: npm run sync:tokens. Drift check: npm run check:tokens. */ /* Syncera design tokens — single source of truth. Brand colour is Pantone-anchored; the hex values below are the screen build. Print CMYK builds live in SYNCERA_DESIGN_SYSTEM.md (derived for FOGRA39). */ :root { /* ---- brand core ---- */ --sy-navy: #0f1726; /* Pantone 276 C */ --sy-green: #82ce13; /* Pantone 368 C */ --sy-cream: #f9f7ef; /* Pantone 11-0602 TCX — the default background */ --sy-warm-grey: #e6e1d4; /* ---- extended surface / text ---- */ --sy-soft: #f4f1e8; --sy-white: #ffffff; --sy-ink: #1b2436; --sy-muted: #6b7280; --sy-line: #e6e1d4; --sy-green-deep: #4f7d0c; --sy-accent: #3f6bb0; /* ---- role tokens: use these, not the raw hues ---- Brand green is a SURFACE/accent colour. On cream it is 1.8:1 — unusable as text. --sy-green-text is the accessible green for small text on a light surface (4.58:1 on cream, 4.92:1 on white). On navy, --sy-green is safe at 9.2:1 — that is where the payoff line lives. */ --sy-green-text: var(--sy-green-deep); --sy-on-navy-muted: #e6e1d4; /* secondary text on navy — 13.7:1 */ /* ---- status: a SEPARATE, closed set ---- Brand green never means "good"; status green is never a brand accent. */ --sy-status-green: #1e9e62; --sy-status-amber: #d99100; --sy-status-red: #c5453b; /* ---- type ---- */ --sy-font-display: 'Oxanium', system-ui, sans-serif; /* headlines, wordmark, numerals */ --sy-font-ui: 'Outfit', system-ui, sans-serif; /* body, UI, labels, sub-brands */ --sy-track-label: 0.16em; --sy-track-descriptor: 0.38em; /* ---- type scale (screen) ---- display/title/heading/subheading are the DISPLAY face (Oxanium), including all numerals. body/small/label are the UI face (Outfit). */ --sy-text-display: clamp(36px, 5vw, 56px); --sy-text-title: clamp(26px, 3.2vw, 34px); --sy-text-heading: 22px; --sy-text-subheading: 18px; --sy-text-body: 16px; --sy-text-small: 13px; --sy-text-label: 12px; --sy-leading-tight: 1.05; --sy-leading-body: 1.55; /* ---- shape ---- */ --sy-radius: 16px; /* screen only — print blocks are square */ --sy-radius-sm: 8px; /* buttons, pills, tags — screen only */ --sy-shadow-sm: 0 1px 2px rgba(15, 23, 38, .06); --sy-shadow-md: 0 2px 5px rgba(15, 23, 38, .05), 0 14px 30px -18px rgba(15, 23, 38, .28); --sy-shadow-lg: 0 4px 10px rgba(15, 23, 38, .06), 0 28px 56px -24px rgba(15, 23, 38, .34); --sy-rule: 1px; /* ---- spacing scale ---- */ --sy-space-1: 4px; --sy-space-2: 8px; --sy-space-3: 12px; --sy-space-4: 16px; --sy-space-5: 24px; --sy-space-6: 32px; --sy-space-7: 48px; --sy-space-8: 64px; /* ---- APPLICATION LAYER (E4a, 2026-07-31) ---- Why this exists: the system had ONE mid-tone neutral (--sy-muted) and one hairline (--sy-line). Between them, by luminance, was a hole: --sy-line 0.754 (nothing) <- the entire mid range --sy-muted 0.167 That band is where dense UI lives: table borders, row hovers, inactive rows, secondary and tertiary text. Building the staff portal's admin surface, someone needed those values, found none, and reached for Tailwind's slate ramp — 139 literals across ~20 routes, carrying 102 of the portal's 159 WCAG AA failures. The palette caused that, not the author. Hue 218 is deliberate and NOT a betrayal of a warm brand. Syncera is already warm at the light end and cool at the dark end: --sy-cream, --sy-soft and --sy-line sit at hue 43-48, while --sy-muted, --sy-ink and --sy-navy sit at 219-220. (--sy-muted is byte-identical to Tailwind gray-500.) These fill the seam between the two, on the cool side, because that is where the text they sit beside already lives. These are for APPLICATION surfaces — dense internal tools. Brand and collateral surfaces keep cream/soft/white and do not need them. */ /* Surfaces — light to dark. Never for text. */ --sy-portal-bg: #f9f7ef; /* = --sy-cream. The page. Not white. */ --sy-portal-surface: #ffffff; /* cards and table bodies on the page */ --sy-portal-raised: #f3f5f7; /* row hover, zebra, selected, subtle fills */ --sy-portal-sunken: #eceef2; /* toolbars, table headers, inset wells */ /* Lines. Non-text: WCAG 1.4.11 asks 3:1 for a CONTROL's boundary, not for a decorative table hairline, so these stay light on purpose. A control border uses --sy-portal-border-strong. */ --sy-portal-border: #e4e7ed; /* table hairlines, card edges */ /* Input and control boundaries. Clears WCAG 1.4.11's 3:1 on ALL FOUR application surfaces: 3.50 white, 3.26 bg/cream, 3.20 raised, 3.01 sunken. CORRECTED 2026-08-05 (E4b). This was #97a3b6, described here and in rule A10 as "3.05:1 on white". It was 2.55 on white, 2.38 cream, 2.33 raised, 2.20 sunken — the token failed the one job it was created for, on every surface, while two documents asserted otherwise. E4a's intent was right; only the hex missed, so this is a correction, not a change of mind. Sunken is included deliberately: it is the toolbar and table-header fill, and Toolbar's search input sits on it. An earlier candidate (#828fa4) was rejected for landing at 2.9957 there and on raised — it read as "3.00" only because the check printed two decimals. See test/token-contrast.test.mjs, which now computes these rather than quoting them. */ --sy-portal-border-strong: #7d8a9f; /* Text — EVERY step passes WCAG AA on --sy-portal-bg. This is the rule the old values broke, and the reason there is no fourth, lighter step. */ --sy-portal-text: var(--sy-ink); /* #1b2436 — 14.48:1. Body, table cells. */ --sy-portal-text-secondary: #48556c; /* 7.01:1. Labels, metadata, secondary columns. */ --sy-portal-text-tertiary: #586985; /* 5.19:1 cream, 4.70:1 on the lightest warm grey. Em-dashes, counts, empty states, inactive rows. The lightest text permitted. */ /* NOTE — there is deliberately no --sy-portal-text-disabled. WCAG 1.4.3 exempts genuinely disabled CONTROLS from contrast, and that exemption is what made a very light grey feel defensible. But in the portal the equivalent token was applied to an empty-value em-dash, the "ongoing" stint status, the detail column of the submissions log, empty- state copy and a search result count — all of them content, none of them exempt, all of them at 2.39:1. The name licensed the misuse. A disabled control is a component STATE (.sy-btn:disabled), not a colour an author reaches for. If you want something to recede, use tertiary: at 4.75:1 against 14.48:1 body text it still reads clearly as secondary. */ /* Tracking for a dense application header — a table column head, a field label. NOT --sy-track-label (0.16em): that is the brand eyebrow, and at 0.16em a column head like "SIGN-UPS" gains ~9px, which is the difference between a table fitting 360px and scrolling. This value ratifies what the portal's two table families already use (.rt 0.03em, .admin-table 0.04em) rather than letting the next author pick a 24th letter-spacing string — the audit counted 23, and 0.16em appears in none of them. (E4b) */ --sy-portal-track-header: 0.04em; /* ---- mark colours (consumed by the SVG marks) ---- */ --sy-mark-ink: var(--sy-navy); --sy-mark-accent: var(--sy-green); /* 8 Sep 2026: the application layer is the PORTAL layer (portal = the staff application; "app" is reserved for the customer app). The --sy-app-* names stay as aliases for one release so nothing breaks; new code uses --sy-portal-*. */ --sy-app-bg: var(--sy-portal-bg); --sy-app-surface: var(--sy-portal-surface); --sy-app-raised: var(--sy-portal-raised); --sy-app-sunken: var(--sy-portal-sunken); --sy-app-border: var(--sy-portal-border); --sy-app-border-strong: var(--sy-portal-border-strong); --sy-app-text: var(--sy-portal-text); --sy-app-text-secondary: var(--sy-portal-text-secondary); --sy-app-text-tertiary: var(--sy-portal-text-tertiary); --sy-app-track-header: var(--sy-portal-track-header); } /* Colourways — set on any ancestor of a mark. */ .sy-on-light { --sy-mark-ink: var(--sy-navy); --sy-mark-accent: var(--sy-green); } .sy-on-navy { --sy-mark-ink: var(--sy-white); --sy-mark-accent: var(--sy-green); } .sy-on-green { --sy-mark-ink: var(--sy-navy); --sy-mark-accent: var(--sy-navy); } .sy-mono-white { --sy-mark-ink: var(--sy-white); --sy-mark-accent: var(--sy-white); } .sy-mono-navy { --sy-mark-ink: var(--sy-navy); --sy-mark-accent: var(--sy-navy); }