/* Contenyx design tokens — PBI 17 "Warm & Clear" (spec §5). LAYER 1: project primitives. Every colour value in the app is written HERE and nowhere else; components consume var(--cx-*). LAYER 2: the Bootstrap variables Bootstrap 5.3 ACTUALLY consumes, including the *-rgb forms. This is NOT sufficient on its own — Bootstrap compiles its component variants to literal colours, which components.css re-points (spec §5, "the implementation crux"). Fonts are self-hosted (no CDN — spec §3.2). Both are OFL. The files are the variable woff2 builds Google Fonts serves for: Inter css2?family=Inter:wght@400..700 Plus Jakarta Sans css2?family=Plus+Jakarta+Sans:wght@600..700 latin-ext is required: it carries the Polish diacritics. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- LAYER 1: primitives (light) ---------------------------------- */ :root { /* brand — the VIVID coral seed, never Material's computed `primary` #ae271d, which is a brick red that collides with `error` (design-tokens.md caveat). */ --cx-brand: #ff6f5e; --cx-brand-rgb: 255, 111, 94; --cx-brand-ink: #3d0c07; /* dark text that rides ON coral — 6.1:1. White on coral is 2.7:1 and fails AA. */ --cx-brand-hover: #f4573f; --cx-brand-active: #e04a34; --cx-link-rgb: 194, 67, 47; /* readable coral for text links on cream */ /* surfaces / text */ --cx-bg: #fff4f4; --cx-bg-rgb: 255, 244, 244; --cx-ink: #4d2127; --cx-ink-rgb: 77, 33, 39; --cx-ink-muted: #824c52; --cx-surface: #ffe1e3; --cx-surface-low: #ffeced; --cx-surface-lowest: #ffffff; /* the card face in light */ --cx-surface-hover: #ffd2d5; --cx-outline: #de9ba2; /* TWO outline weights, per design-tokens.md:138-139. `outline` is for anything the eye must find — form controls, outline buttons, pagination — and clears WCAG 1.4.11's 3:1 at 4.17:1 on --cx-bg. `outline-variant` is DECORATIVE and is documented (design-tokens.md:334-341) as the dark card hairline only, where a low-contrast edge is the intent. The spec collapsed the two into one and used the variant for both, putting every input border at 2.09:1; this restores the split. Do not point interactive boundaries at --cx-outline. */ --cx-outline-strong: #a1676d; /* semantic status (bg / ink pairs, hand-authored — never algorithm-derived) */ --cx-answered-bg: #d4f4dd; --cx-answered-ink: #0d5b2a; --cx-new-bg: #ffe6b8; --cx-new-ink: #7a4600; --cx-processing-bg: #b6e34a; --cx-processing-ink: #2b3a06; --cx-failed-bg: #ffdad6; --cx-failed-ink: #8c1218; /* RGB companion: Bootstrap injects --bs-btn-focus-shadow-rgb straight into rgba(), where a hex value is invalid and the focus ring silently disappears. */ --cx-failed-ink-rgb: 140, 18, 24; --cx-own-bg: #cfeef7; --cx-own-ink: #0f4d5e; --cx-ignored-bg: #e4e2e4; --cx-ignored-ink: #4a464a; /* platform */ --cx-fb-bg: #dbe7fb; --cx-fb-ink: #14458f; --cx-ig-bg: #fde0ef; --cx-ig-ink: #96185f; /* layout / depth. Light gets soft shadows and NO structural borders; dark gets a 1px hairline instead, because a soft shadow is invisible on near-black (the one deliberate light/dark geometry difference — spec §4). */ --cx-shell-max: 1240px; --cx-radius: .5rem; --cx-radius-lg: .75rem; --cx-shadow: 0 2px 8px rgba(77, 33, 39, .08); --cx-shadow-lift: 0 4px 16px rgba(77, 33, 39, .12); --cx-card-border: transparent; } /* ---------- LAYER 1: primitives (dark) ----------------------------------- */ [data-bs-theme="dark"] { --cx-brand: #ff8e7f; --cx-brand-rgb: 255, 142, 127; --cx-brand-ink: #650002; --cx-brand-hover: #ffa799; --cx-brand-active: #ff7260; --cx-link-rgb: 255, 142, 127; --cx-bg: #0e0e0e; --cx-bg-rgb: 14, 14, 14; --cx-ink: #ffffff; --cx-ink-rgb: 255, 255, 255; --cx-ink-muted: #adaaaa; --cx-surface: #1a1919; --cx-surface-low: #131313; --cx-surface-lowest: #1a1919; --cx-surface-hover: #262626; --cx-outline: #484847; --cx-outline-strong: #767575; --cx-answered-bg: #123d22; --cx-answered-ink: #7ee8a2; --cx-new-bg: #4a3208; --cx-new-ink: #ffcf7a; --cx-processing-bg: #2f3d0a; --cx-processing-ink: #bfe86a; --cx-failed-bg: #5c151a; --cx-failed-ink: #ff9d9d; --cx-failed-ink-rgb: 255, 157, 157; --cx-own-bg: #10353f; --cx-own-ink: #8fd9ec; --cx-ignored-bg: #2a2a2a; --cx-ignored-ink: #b8b4b4; --cx-fb-bg: #14294a; --cx-fb-ink: #a8c7ff; --cx-ig-bg: #4a1236; --cx-ig-ink: #ffa8d5; --cx-shadow: 0 2px 10px rgba(0, 0, 0, .5); --cx-shadow-lift: 0 4px 18px rgba(0, 0, 0, .6); --cx-card-border: var(--cx-outline); /* the dark-only hairline (spec §4) */ } /* ---------- LAYER 2: rebind what Bootstrap really reads ------------------- */ /* Bootstrap 5.3 reads some of these as plain colours and some ONLY as `*-rgb` (links and text-bg-* are rgb-only). Both forms must be set or half the UI stays blue. Listed on all three selectors so it holds whichever way data-bs-theme is (or is not) set on . */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-primary: var(--cx-brand); --bs-primary-rgb: var(--cx-brand-rgb); --bs-body-bg: var(--cx-bg); --bs-body-bg-rgb: var(--cx-bg-rgb); --bs-body-color: var(--cx-ink); --bs-body-color-rgb: var(--cx-ink-rgb); --bs-emphasis-color: var(--cx-ink); --bs-emphasis-color-rgb: var(--cx-ink-rgb); --bs-secondary-color: var(--cx-ink-muted); --bs-link-color: rgb(var(--cx-link-rgb)); --bs-link-color-rgb: var(--cx-link-rgb); --bs-link-hover-color-rgb: var(--cx-link-rgb); --bs-secondary-bg: var(--cx-surface); --bs-tertiary-bg: var(--cx-surface-low); --bs-border-color: var(--cx-outline-strong); --bs-border-radius: var(--cx-radius); --bs-focus-ring-color: rgba(var(--cx-brand-rgb), .35); --bs-body-font-family: 'Inter', system-ui, sans-serif; --bs-body-font-size: 1rem; /* body-lg 16px */ --bs-body-line-height: 1.6; } /* Typography: ONE scale for both themes (design-tokens.md — the dark system's Geist/16px/4px drift is a Stitch artefact and is rejected). */ body { font-family: var(--bs-body-font-family); } h1, .h1, h2, .h2, h3, .h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.01em; } h1, .h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; } /* headline-lg */ h2, .h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; } /* headline-md */ h3, .h3, h4, .h4, h5, .h5 { font-weight: 600; line-height: 1.3; } small, .small { font-size: .875rem; } /* body-md */