/* ========================================================================== ACXPA Design System — tokens File: css/acxpa-tokens.css (wp-content/themes/kleo-child/css/) Version: 1.6.0 Owns: Every brand value on acxpa.com.au. This is the ONLY file in which a brand hex may appear (Ruleset R-A1). Enqueue: FIRST — before any theme or plugin stylesheet. Governed by: ACXPA Digital Standards — Executable Ruleset v4.0 R-A1 this is the only file containing a brand hex R-A3 never write a var() fallback when consuming these R-C5 never hand-write a rem for type; use the tokens below R-G1 load order and where CSS is allowed to live R-G14 bump the version above whenever anything here changes R-N12 the six logo-artwork hexes are NOT here, and must not be added --------------------------------------------------------------------------- CHANGELOG v1.6.0 (23 September 2026) Comments and notation only — no token changed value and nothing changes appearance. • Two contrast figures in comments were wrong and are corrected: Gold Mid on white is 2.39:1, not 2.28:1; Live on white is 3.67:1, not 3.16:1. Both were understated, so the "NEVER text" guidance they support still holds — but a wrong number in the file that IS the source of truth is the defect, not the guidance. Every other ratio in this file was recomputed and verifies exactly. • The three shadow tints were `rgba(15, 79, 92, x)` — Teal 700 written out by hand. They now resolve from the token via color-mix(), so a change to Teal 700 carries into the shadows instead of leaving them behind. Composited pixel-identical. • Added the R-N12 note under Brand: the six logo hexes are artwork and are deliberately absent from this file. v1.5.0 Adds --acxpa-ds-live (#FF2D4B), the live-session red used by acxpa-live-nav.css. ONE new declaration; no existing token changed value. It is the value that was hard-coded in that stylesheet, promoted here so the file can stop carrying a brand literal (R-A1). Nothing changes appearance. v1.4.0 Adds --acxpa-ds-gold-mid (#E09A14). ONE new declaration; no existing token changed value. It is the value that was hard-coded as --acat-gold-deep in acxpa-category-pages.css, promoted here so that file can stop carrying a brand hex. Nothing on the site changes appearance: the same value now arrives from the token. v1.3.0 Comments only — no declaration changed, no value moved. Corrected the rating-scale name (was "ACQS", retired) and replaced every reference to the withdrawn Brand & Digital Standards section numbering with permanent rule IDs. Added this header. v1.2.0 Root-size factor; eyebrow tokens; on-dark text roles. v1.1.0 Five-band rating scale. --------------------------------------------------------------------------- ROOT SIZE — read before changing anything in the Type or Space groups. The standards publish the scale at a 16px root. acxpa.com.au does not have one: the theme sets html{font-size:62.5%}, so the root is 10px. The scale below is therefore kept exactly as published and multiplied by one factor: --acxpa-ds-root-scale = 16 / (actual root px) 10px root — html{font-size:62.5%} -> 1.6 <- acxpa.com.au 16px root — browser default -> 1 Change that ONE value if the theme's root ever moves, and nothing else. Never compensate for it in page CSS. rem is retained throughout so reader font-size preferences still scale — never substitute px. Viewport terms inside clamp() are NOT scaled: vw is already absolute. ========================================================================== */ :root{ /* Root size correction — see header. 1.6 = 10px root. 1 = 16px root. */ --acxpa-ds-root-scale:1.6; /* Brand */ --acxpa-ds-teal-50:#F1F6F7; --acxpa-ds-teal-100:#DBE5E7; --acxpa-ds-teal-200:#B7CDD2; --acxpa-ds-teal-300:#8AB0B8; --acxpa-ds-teal-400:#57909C; --acxpa-ds-teal-500:#2A7383; --acxpa-ds-teal-600:#155F6E; --acxpa-ds-teal-700:#0F4F5C; --acxpa-ds-teal-800:#0A3A44; --acxpa-ds-teal-900:#062831; --acxpa-ds-gold:#F9B02E; --acxpa-ds-gold-tint:#FDEBCB; --acxpa-ds-gold-deep:#9A6412; /* Gold Mid — the step between Gold and Gold Deep. Decorative only: the far end of a gold gradient, a border, a dotted rule. NEVER text. On white it is 2.39:1. Added v1.4.0 to retire the last literal in acxpa-category-pages.css (R-A1). */ --acxpa-ds-gold-mid:#E09A14; --acxpa-ds-clay:#C05A42; --acxpa-ds-clay-deep:#8E3D2A; --acxpa-ds-clay-tint:#F7E3DC; --acxpa-ds-harbour:#2C4880; --acxpa-ds-harbour-deep:#1B2F52; --acxpa-ds-harbour-tint:#E0E7F2; /* NOT HERE, ON PURPOSE — the logo palette (R-N12). The mark carries six values: #40A4A8 #FF9E00 #F9B02E on its teal disc, #489AA5 #A16920 #7D570C on white. Five of them are absent from this file and must stay absent. Measured against the tokens above: #A16920 is dE 2.6 from Gold Deep, #489AA5 is dE 4.5 from Teal 400, #7D570C is dE 5.7 from Warning Deep — each a near-duplicate that reads *worse* on every light ground than the token beside it. #40A4A8 and #FF9E00 are genuinely new but measure 2.96:1 and 2.07:1 on white, so neither is safe on a light ground at all. The sixth needs no entry: step 3 on the teal disc IS --acxpa-ds-gold, #F9B02E, unchanged. That is why the brand amber survives in the mark. Adding the other five would put a second near-identical palette in the file, which is the defect recorded in the Decision Log under the courses.css :root block. Brand Basics v4.0 §3 carries all six as artwork. */ /* Neutrals */ --acxpa-ds-ink:#14252A; --acxpa-ds-slate:#5E7075; --acxpa-ds-cloud:#F4F7F7; --acxpa-ds-white:#FFFFFF; --acxpa-ds-sand:#FAF7F2; --acxpa-ds-stone:#E7E1D8; --acxpa-ds-warm-slate:#7A7268; /* Status — feedback only (R-B17). Never decorative, never a brand accent. */ --acxpa-ds-success:#1E7A5A; --acxpa-ds-success-deep:#12523C; --acxpa-ds-success-tint:#E2F1EB; --acxpa-ds-warning:#B26A00; --acxpa-ds-warning-deep:#7A4900; --acxpa-ds-warning-tint:#FBEEDA; --acxpa-ds-error:#B3182C; --acxpa-ds-error-deep:#7E101F; --acxpa-ds-error-tint:#FAE4E7; /* Live — a session that is happening RIGHT NOW. Deliberately NOT Error: a live roundtable is not a fault, and the two must not be confused at a glance. #FF2D4B is the widely-read "live" red; Error #B3182C is dE 24.8 away and reads as a warning. Used only on the live-session flag in the main navigation. NEVER text — 3.67:1 on white. Added v1.5.0. */ --acxpa-ds-live:#FF2D4B; --acxpa-ds-info:#2C4880; --acxpa-ds-info-deep:#1B2F52; --acxpa-ds-info-tint:#E0E7F2; /* Rating bands — the five-band ACXPA Contact Centre CX Standards scale. (Renamed from "Australian Contact Centre Quality Standards" / ACQS, which is retired. See R-J5.) Classification, not feedback: these grade a measured result and may sit in tables, charts and score chips. The status colours above stay reserved for alerts, validation and system messages, and the two sets never mix on one surface (R-B18). Inside a grading component these five fills are reserved against any element that presents a VALUE (R-B19) — a duration, count, date or rank takes a neutral (R-B20). Controls carrying a label are outside that reservation and take R-E1. Every pair below is measured; the scale is ordered gold -> teal -> neutral teal -> warm tint -> red, so the extremes carry the most weight. */ --acxpa-ds-band-outstanding:var(--acxpa-ds-gold); /* #F9B02E */ --acxpa-ds-band-outstanding-on:var(--acxpa-ds-ink); /* #14252A - 8.49:1 AAA */ --acxpa-ds-band-exceeds:var(--acxpa-ds-teal-700); /* #0F4F5C */ --acxpa-ds-band-exceeds-on:var(--acxpa-ds-white); /* #FFFFFF - 9.16:1 AAA */ --acxpa-ds-band-meets:var(--acxpa-ds-teal-200); /* #B7CDD2 */ --acxpa-ds-band-meets-on:var(--acxpa-ds-ink); /* #14252A - 9.55:1 AAA */ --acxpa-ds-band-below:var(--acxpa-ds-warning-tint); /* #FBEEDA */ --acxpa-ds-band-below-on:var(--acxpa-ds-warning-deep); /* #7A4900 - 6.60:1 AA */ --acxpa-ds-band-poor:var(--acxpa-ds-error); /* #B3182C */ --acxpa-ds-band-poor-on:var(--acxpa-ds-white); /* #FFFFFF - 6.81:1 AA */ /* Roles — light grounds. Use a role for its role (R-B7): --acxpa-ds-border happens to hold Teal 200 today and is free to change underneath you. */ --acxpa-ds-text:var(--acxpa-ds-ink); --acxpa-ds-text-muted:var(--acxpa-ds-slate); --acxpa-ds-bg:var(--acxpa-ds-white); --acxpa-ds-bg-subtle:var(--acxpa-ds-cloud); --acxpa-ds-border:var(--acxpa-ds-teal-200); --acxpa-ds-border-strong:var(--acxpa-ds-teal-400); --acxpa-ds-link:var(--acxpa-ds-teal-600); --acxpa-ds-link-hover:var(--acxpa-ds-teal-700); --acxpa-ds-link-visited:var(--acxpa-ds-harbour); --acxpa-ds-focus:var(--acxpa-ds-teal-700); --acxpa-ds-focus-on-dark:var(--acxpa-ds-gold); /* Roles — dark grounds (Teal 700 / Teal 500 / Harbour bands). Text on a dark band is SOLID, never white at reduced opacity: diluting white invents an unmeasured colour and optically thins Poppins Regular at body size (R-B14). Ratios below are on Teal 700. On Teal 500 use --on-dark for every role, secondary included (white on Teal 500 = 5.41:1). */ --acxpa-ds-text-on-dark:var(--acxpa-ds-white); /* 9.16:1 AAA */ --acxpa-ds-text-muted-on-dark:var(--acxpa-ds-teal-200); /* 5.53:1 AA — the measured pair. Teal 200 is a valid TEXT colour on Teal 700 ONLY. R-B13 bans it on white, where it measures 1.66:1. */ --acxpa-ds-border-on-dark:var(--acxpa-ds-teal-200); /* 5.53:1 — ghost button / divider edges */ /* Type — the web type scale (Ruleset §C), held at published values and root-corrected. Comments show the rendered px at root-scale 1.6 (10px root). Never hand-write a rem for type; use these (R-C5). */ --acxpa-ds-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --acxpa-ds-text-display:clamp( calc(2.25rem * var(--acxpa-ds-root-scale)), calc(1.5rem * var(--acxpa-ds-root-scale)) + 3.2vw, calc(3.25rem * var(--acxpa-ds-root-scale))); /* 36 -> 52px */ --acxpa-ds-text-h1:clamp( calc(1.875rem * var(--acxpa-ds-root-scale)), calc(1.4rem * var(--acxpa-ds-root-scale)) + 2vw, calc(2.5rem * var(--acxpa-ds-root-scale))); /* 30 -> 40px */ --acxpa-ds-text-h2:calc(1.875rem * var(--acxpa-ds-root-scale)); /* 30px */ --acxpa-ds-text-h3:calc(1.375rem * var(--acxpa-ds-root-scale)); /* 22px */ --acxpa-ds-text-h4:calc(1.125rem * var(--acxpa-ds-root-scale)); /* 18px */ --acxpa-ds-text-lead:calc(1.25rem * var(--acxpa-ds-root-scale)); /* 20px */ --acxpa-ds-text-body:calc(1rem * var(--acxpa-ds-root-scale)); /* 16px */ --acxpa-ds-text-small:calc(0.875rem * var(--acxpa-ds-root-scale));/* 14px */ --acxpa-ds-text-caption:calc(0.75rem * var(--acxpa-ds-root-scale));/* 12px */ /* Eyebrow — a named role in the scale. Use the token; never hard-code 13px. */ --acxpa-ds-text-eyebrow:calc(0.8125rem * var(--acxpa-ds-root-scale)); /* 13px */ --acxpa-ds-tracking-eyebrow:0.12em; --acxpa-ds-leading-tight:1.12; --acxpa-ds-leading-snug:1.32; --acxpa-ds-leading-body:1.65; --acxpa-ds-leading-eyebrow:1.30; --acxpa-ds-measure:68ch; /* opt-in via .acxpa-ds-prose ONLY — never global. A global max-width on p is R-C7. ch is root-independent: do not scale. */ /* Space — the 4px base grid (R-D1). */ --acxpa-ds-space-2xs:calc(0.25rem * var(--acxpa-ds-root-scale)); /* 4px */ --acxpa-ds-space-xs:calc(0.5rem * var(--acxpa-ds-root-scale)); /* 8px */ --acxpa-ds-space-sm:calc(0.75rem * var(--acxpa-ds-root-scale)); /* 12px */ --acxpa-ds-space-md:calc(1rem * var(--acxpa-ds-root-scale)); /* 16px */ --acxpa-ds-space-lg:calc(1.5rem * var(--acxpa-ds-root-scale)); /* 24px */ --acxpa-ds-space-xl:calc(2rem * var(--acxpa-ds-root-scale)); /* 32px */ --acxpa-ds-space-2xl:calc(3rem * var(--acxpa-ds-root-scale)); /* 48px */ --acxpa-ds-space-3xl:calc(4rem * var(--acxpa-ds-root-scale)); /* 64px */ --acxpa-ds-space-4xl:calc(6rem * var(--acxpa-ds-root-scale)); /* 96px */ --acxpa-ds-space-5xl:calc(8rem * var(--acxpa-ds-root-scale)); /* 128px */ /* Radius + elevation — px by design. These are drawn geometry, not reading size, and must not grow with the reader's font-size preference. Shadows are teal-tinted, never neutral black (R-D3). */ --acxpa-ds-radius-sm:4px; --acxpa-ds-radius-md:8px; --acxpa-ds-radius-lg:12px; --acxpa-ds-radius-xl:20px; --acxpa-ds-radius-pill:999px; --acxpa-ds-shadow-sm:0 1px 2px color-mix(in srgb, var(--acxpa-ds-teal-700) 8%, transparent); --acxpa-ds-shadow-md:0 2px 8px color-mix(in srgb, var(--acxpa-ds-teal-700) 10%, transparent); --acxpa-ds-shadow-lg:0 8px 24px color-mix(in srgb, var(--acxpa-ds-teal-700) 12%, transparent); } /* ========================================================================== DESIGN SYSTEM PRIMITIVES Everything below this line is CSS, not a token. It is permitted here under R-G18: it is namespaced .acxpa-ds- / :focus-visible, it introduces no brand hex outside :root above, and it belongs with the tokens it consumes. The boundary: nothing page-specific, nothing feature-specific and nothing that overrides a plugin ever goes in this file. Those are R-G1 locations 3, 4 and 5. ========================================================================== */ /* -------------------------------------------------------------------------- Rating band component — opt-in, single class. Colour never carries the band on its own (R-B1): the score itself sits inside the chip and .acxpa-ds-band__range names the threshold, so the meaning survives greyscale print and high-contrast mode (R-E22). -------------------------------------------------------------------------- */ .acxpa-ds-band{ display:inline-flex; align-items:baseline; gap:var(--acxpa-ds-space-xs); padding:var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-sm); border-radius:var(--acxpa-ds-radius-sm); font-weight:600; font-size:var(--acxpa-ds-text-small); font-variant-numeric:tabular-nums; white-space:nowrap; } .acxpa-ds-band__range{ font-weight:400; opacity:0.85; } .acxpa-ds-band--outstanding{ background:var(--acxpa-ds-band-outstanding); color:var(--acxpa-ds-band-outstanding-on); } .acxpa-ds-band--exceeds{ background:var(--acxpa-ds-band-exceeds); color:var(--acxpa-ds-band-exceeds-on); } .acxpa-ds-band--meets{ background:var(--acxpa-ds-band-meets); color:var(--acxpa-ds-band-meets-on); } .acxpa-ds-band--below{ background:var(--acxpa-ds-band-below); color:var(--acxpa-ds-band-below-on); } .acxpa-ds-band--poor{ background:var(--acxpa-ds-band-poor); color:var(--acxpa-ds-band-poor-on); } /* Forced-colours mode strips background and colour entirely. Without this the five bands become indistinguishable, so give each one a border the OS keeps. */ @media (forced-colors: active){ .acxpa-ds-band{ border:1px solid CanvasText; forced-color-adjust:none; } } /* -------------------------------------------------------------------------- Keyboard focus ring — R-E7. A Teal 700 outline with a Gold halo outside it. The teal carries the indicator on light grounds (9.16:1) and the gold carries it on dark teal (4.92:1), so one declaration serves both. This is deliberate: do NOT simplify it to a single colour, and never write outline:none without an equivalent replacement (R-E8). -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--acxpa-ds-focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--acxpa-ds-focus-on-dark); border-radius: 2px; }