/* ========================================================================== CX Skills Design System — tokens File: css/cxskills-tokens.css (wp-content/themes/conferpress-child/css/) Version: 1.0.1 Owns: Every brand value on cxskills.com.au. This is the ONE place a brand hex should live. Everything else consumes these with var(). Enqueue: FIRST — before any theme or plugin stylesheet. Loaded by wp-content/mu-plugins/cxskills-tokens-loader.php. RULES 1. A brand colour, font, type size, space step, radius or shadow is defined here and nowhere else. Stylesheets use var(--cxs-ds-*). 2. Never write a var() fallback when consuming these: var(--cxs-ds-link), not var(--cxs-ds-link, #504B8C). A fallback is a second copy of the value, and it silently goes stale. 3. Use a ROLE token (text, link, border, bg...) for its role. Reach for a raw step (indigo-600) only when no role fits. Roles are free to be re-pointed here without touching any stylesheet. 4. Bump the version and add a changelog line whenever anything changes. SHARED WITH ACXPA Gold, the neutrals and the status colours use the same values as ACXPA's acxpa-tokens.css (v1.6.0, 23 Sep 2026). CX Skills is a separate site on a separate cPanel account, so they are copied, not linked. If ACXPA ever changes one of them, change it here too. Indigo is CX Skills' own. ROOT SIZE cxskills.com.au has a 10px root: the theme's bootstrap.min.css sets html{font-size:62.5%}. --cxs-ds-root-scale is therefore 1.6, which turns every rem below back into the published px value (1rem x 1.6 = 16px). If the root ever becomes 16px, change it to 1 and nothing else. Never compensate for it anywhere else. --------------------------------------------------------------------------- CHANGELOG v1.0.1 (23 September 2026) Root-size correction. v1.0.0 set --cxs-ds-root-scale to 1 on the strength of a measurement that was wrong: the live root is 10px (Bootstrap 3 sets html{font-size:62.5%}), so every type and space token was rendering at 62.5% of its intended size. Now 1.6. No colour changed. Nothing consumed these tokens before this release. v1.0.0 (23 September 2026) First issue. Tokens only: this file declares custom properties and nothing reads them yet, so the site does not change appearance when it is loaded. ========================================================================== */ :root{ /* Root size correction — see header. 1.6 = 10px root (this site). 1 = 16px root. */ --cxs-ds-root-scale:1.6; /* --------------------------------------------------------------------- BRAND — Indigo. CX Skills' primary colour. Each step copies the OKLCH lightness of the matching ACXPA Teal step, so Indigo 700 carries the same visual weight as ACXPA Teal 700. Contrast on white: 50 1.10 100 1.29 200 1.68 300 2.41 400 3.74 (large text only) 500 5.74 600 7.70 700 9.62 800 12.79 900 15.88 --------------------------------------------------------------------- */ --cxs-ds-indigo-50:#F4F4FA; --cxs-ds-indigo-100:#E1E2EE; --cxs-ds-indigo-200:#C5C6E0; --cxs-ds-indigo-300:#A4A3CE; --cxs-ds-indigo-400:#807EBA; --cxs-ds-indigo-500:#625EA4; --cxs-ds-indigo-600:#504B8C; --cxs-ds-indigo-700:#423E76; /* the brand colour: logo wordmark, hero bands */ --cxs-ds-indigo-800:#302D58; --cxs-ds-indigo-900:#211E3F; /* --------------------------------------------------------------------- BRAND — Gold. Shared with ACXPA. The action colour: primary buttons, the top bar of the logo, highlights. Text on Gold is Ink (8.49:1) or Indigo 700 (5.17:1), never white (1.94:1). Gold Mid and Gold on white are decorative only, NEVER text. --------------------------------------------------------------------- */ --cxs-ds-gold:#F9B02E; --cxs-ds-gold-mid:#E09A14; /* decorative only — 2.39:1 on white */ --cxs-ds-gold-deep:#9A6412; --cxs-ds-gold-tint:#FDEBCB; /* a Gold Tint ground takes Ink text, never Gold Deep (4.26:1 fails) */ /* --------------------------------------------------------------------- NEUTRALS — shared with ACXPA. --------------------------------------------------------------------- */ --cxs-ds-ink:#14252A; --cxs-ds-slate:#5E7075; /* 5.18:1 on white */ --cxs-ds-cloud:#F4F7F7; --cxs-ds-white:#FFFFFF; --cxs-ds-sand:#FAF7F2; --cxs-ds-stone:#E7E1D8; --cxs-ds-warm-slate:#7A7268; /* --------------------------------------------------------------------- STATUS — shared with ACXPA. Feedback only: alerts, form validation, system messages. Never decorative and never a brand accent. --------------------------------------------------------------------- */ --cxs-ds-success:#1E7A5A; --cxs-ds-success-deep:#12523C; --cxs-ds-success-tint:#E2F1EB; --cxs-ds-warning:#B26A00; --cxs-ds-warning-deep:#7A4900; --cxs-ds-warning-tint:#FBEEDA; --cxs-ds-error:#B3182C; --cxs-ds-error-deep:#7E101F; --cxs-ds-error-tint:#FAE4E7; --cxs-ds-info:#2C4880; --cxs-ds-info-deep:#1B2F52; --cxs-ds-info-tint:#E0E7F2; /* --------------------------------------------------------------------- ROLES — light grounds. Stylesheets should use these, not the raw steps. --------------------------------------------------------------------- */ --cxs-ds-text:var(--cxs-ds-ink); /* 15.8:1 on white */ --cxs-ds-text-muted:var(--cxs-ds-slate); /* 5.18:1 */ --cxs-ds-heading:var(--cxs-ds-ink); --cxs-ds-bg:var(--cxs-ds-white); --cxs-ds-bg-subtle:var(--cxs-ds-indigo-50); --cxs-ds-bg-warm:var(--cxs-ds-sand); --cxs-ds-border:var(--cxs-ds-indigo-100); --cxs-ds-border-strong:var(--cxs-ds-indigo-300); --cxs-ds-link:var(--cxs-ds-indigo-600); /* 7.70:1 */ --cxs-ds-link-hover:var(--cxs-ds-indigo-800); /* 12.79:1 */ --cxs-ds-focus:var(--cxs-ds-indigo-700); --cxs-ds-focus-on-dark:var(--cxs-ds-gold); /* Buttons */ --cxs-ds-btn-primary-bg:var(--cxs-ds-gold); --cxs-ds-btn-primary-text:var(--cxs-ds-ink); /* 8.49:1 */ --cxs-ds-btn-primary-bg-hover:var(--cxs-ds-gold-mid); --cxs-ds-btn-secondary-bg:var(--cxs-ds-indigo-700); --cxs-ds-btn-secondary-text:var(--cxs-ds-white); /* 9.62:1 */ --cxs-ds-btn-secondary-bg-hover:var(--cxs-ds-indigo-800); /* Pills / tags */ --cxs-ds-pill-bg:var(--cxs-ds-indigo-50); --cxs-ds-pill-text:var(--cxs-ds-indigo-700); /* 8.78:1 */ --cxs-ds-pill-border:var(--cxs-ds-indigo-100); /* --------------------------------------------------------------------- ROLES — dark grounds (Indigo 700, 800, 900 bands, the footer). Text on a dark band is SOLID, never white at reduced opacity. Ratios below are on Indigo 700. --------------------------------------------------------------------- */ --cxs-ds-band:var(--cxs-ds-indigo-700); --cxs-ds-band-deep:var(--cxs-ds-indigo-900); --cxs-ds-text-on-dark:var(--cxs-ds-white); /* 9.62:1 */ --cxs-ds-text-muted-on-dark:var(--cxs-ds-indigo-100); /* 7.48:1. Indigo 100/200 are text colours on dark grounds ONLY — on white they fail (1.29 / 1.68). */ --cxs-ds-accent-on-dark:var(--cxs-ds-gold); /* 5.17:1 — kicker text, eyebrows */ --cxs-ds-border-on-dark:var(--cxs-ds-indigo-200); /* 5.74:1 */ /* --------------------------------------------------------------------- TYPE — Poppins carries every role, as on ACXPA. NOTE: Poppins is not loaded on cxskills.com.au yet (the site loads Open Sans from Google Fonts). Until the fonts step ships, anything that uses --cxs-ds-font falls through to the system font on visitors' machines. Comments show the rendered px (at root-scale 1.6 on the 10px root). --------------------------------------------------------------------- */ --cxs-ds-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --cxs-ds-weight-regular:400; --cxs-ds-weight-medium:500; --cxs-ds-weight-semibold:600; --cxs-ds-weight-bold:700; --cxs-ds-text-display:clamp( calc(2.25rem * var(--cxs-ds-root-scale)), calc(1.5rem * var(--cxs-ds-root-scale)) + 3.2vw, calc(3.25rem * var(--cxs-ds-root-scale))); /* 36 -> 52px */ --cxs-ds-text-h1:clamp( calc(1.875rem * var(--cxs-ds-root-scale)), calc(1.4rem * var(--cxs-ds-root-scale)) + 2vw, calc(2.5rem * var(--cxs-ds-root-scale))); /* 30 -> 40px */ --cxs-ds-text-h2:calc(1.875rem * var(--cxs-ds-root-scale)); /* 30px */ --cxs-ds-text-h3:calc(1.375rem * var(--cxs-ds-root-scale)); /* 22px */ --cxs-ds-text-h4:calc(1.125rem * var(--cxs-ds-root-scale)); /* 18px */ --cxs-ds-text-lead:calc(1.25rem * var(--cxs-ds-root-scale)); /* 20px */ --cxs-ds-text-body:calc(1rem * var(--cxs-ds-root-scale)); /* 16px */ --cxs-ds-text-small:calc(0.875rem * var(--cxs-ds-root-scale)); /* 14px */ --cxs-ds-text-caption:calc(0.75rem * var(--cxs-ds-root-scale)); /* 12px */ --cxs-ds-text-eyebrow:calc(0.8125rem * var(--cxs-ds-root-scale)); /* 13px */ --cxs-ds-tracking-eyebrow:0.12em; --cxs-ds-leading-tight:1.12; --cxs-ds-leading-snug:1.32; --cxs-ds-leading-body:1.65; /* --------------------------------------------------------------------- SPACE — 4px base grid. --------------------------------------------------------------------- */ --cxs-ds-space-2xs:calc(0.25rem * var(--cxs-ds-root-scale)); /* 4px */ --cxs-ds-space-xs:calc(0.5rem * var(--cxs-ds-root-scale)); /* 8px */ --cxs-ds-space-sm:calc(0.75rem * var(--cxs-ds-root-scale)); /* 12px */ --cxs-ds-space-md:calc(1rem * var(--cxs-ds-root-scale)); /* 16px */ --cxs-ds-space-lg:calc(1.5rem * var(--cxs-ds-root-scale)); /* 24px */ --cxs-ds-space-xl:calc(2rem * var(--cxs-ds-root-scale)); /* 32px */ --cxs-ds-space-2xl:calc(3rem * var(--cxs-ds-root-scale)); /* 48px */ --cxs-ds-space-3xl:calc(4rem * var(--cxs-ds-root-scale)); /* 64px */ --cxs-ds-space-4xl:calc(6rem * var(--cxs-ds-root-scale)); /* 96px */ --cxs-ds-content-max:1180px; /* --------------------------------------------------------------------- RADIUS + ELEVATION — px by design (drawn geometry, not reading size). Shadows are Indigo-tinted, never neutral black. --------------------------------------------------------------------- */ --cxs-ds-radius-sm:4px; --cxs-ds-radius-md:8px; --cxs-ds-radius-lg:12px; --cxs-ds-radius-xl:20px; --cxs-ds-radius-pill:999px; --cxs-ds-shadow-sm:0 1px 2px color-mix(in srgb, var(--cxs-ds-indigo-900) 8%, transparent); --cxs-ds-shadow-md:0 2px 8px color-mix(in srgb, var(--cxs-ds-indigo-900) 10%, transparent); --cxs-ds-shadow-lg:0 8px 24px color-mix(in srgb, var(--cxs-ds-indigo-900) 12%, transparent); }