/* ========================================================================== CX Consult Design System — tokens File: cxconsult-tokens.css Version: 1.0.0 (23 October 2026) Owns: Every brand value on cxconsult.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. RULES (same rules as CX Skills and ACXPA) 1. A brand colour, font, type size, space step, radius or shadow is defined here and nowhere else. Stylesheets use var(--cxc-ds-*). 2. Never write a var() fallback when consuming these: var(--cxc-ds-link), not var(--cxc-ds-link, #3E4754). 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 (graphite-600) only when no role fits. 4. Bump the version and add a changelog line whenever anything changes. SHARED WITH ACXPA AND CX SKILLS Gold, the neutrals and the status colours are the same values as acxpa-tokens.css and cxskills-tokens.css. CX Consult 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. Graphite is CX Consult's own. ROOT SIZE cxconsult.com.au renders a 16px root. Checked 23 Oct 2026: the theme's bootstrap.min.css sets html{font-size:10px}, but layouts/layout_2/main.css loads after it and sets html{font-size:100%}, which wins. So --cxc-ds-root-scale is 1. If a theme change ever brings the 10px root back, set it to 1.6 and nothing else. Never compensate anywhere else. --------------------------------------------------------------------------- CHANGELOG v1.0.0 (23 October 2026) First issue, with the CX Consult rebrand (Graphite + mark C2). Tokens only: nothing reads them until the site stylesheet ships, so loading this file changes nothing. ========================================================================== */ :root{ --cxc-ds-root-scale:1; /* --------------------------------------------------------------------- BRAND — Graphite. CX Consult's primary colour. Each step copies the OKLCH lightness of the matching ACXPA Teal step (the method used for CX Skills Indigo), so Graphite 700 carries the same visual weight as ACXPA Teal 700 and CX Skills Indigo 700. Contrast on white: 50 1.09 100 1.29 200 1.67 300 2.37 400 3.65 500 5.58 600 7.45 700 9.40 800 12.56 900 15.64 --------------------------------------------------------------------- */ --cxc-ds-graphite-50:#F4F5F6; --cxc-ds-graphite-100:#E1E3E6; --cxc-ds-graphite-200:#C4C9CF; --cxc-ds-graphite-300:#A2A9B3; --cxc-ds-graphite-400:#7C8795; --cxc-ds-graphite-500:#5D6979; --cxc-ds-graphite-600:#4B5665; --cxc-ds-graphite-700:#3E4754; /* the brand colour: logo tile, wordmark, hero bands */ --cxc-ds-graphite-800:#2D343E; --cxc-ds-graphite-900:#1E242B; /* --------------------------------------------------------------------- BRAND — Gold. Shared with ACXPA and CX Skills. The action colour: primary buttons, the tick in the logo, highlights. Text on Gold is Ink (8.49:1) or Graphite 700 (5.05:1), never white (1.86:1). Gold Mid and Gold on white are decorative only, NEVER text. --------------------------------------------------------------------- */ --cxc-ds-gold:#F9B02E; --cxc-ds-gold-mid:#E09A14; /* decorative only — 2.39:1 on white */ --cxc-ds-gold-deep:#9A6412; --cxc-ds-gold-tint:#FDEBCB; /* a Gold Tint ground takes Ink text, never Gold Deep (4.26:1 fails) */ /* --------------------------------------------------------------------- NEUTRALS — shared with ACXPA and CX Skills. --------------------------------------------------------------------- */ --cxc-ds-ink:#14252A; --cxc-ds-slate:#5E7075; /* 5.18:1 on white */ --cxc-ds-cloud:#F4F7F7; --cxc-ds-white:#FFFFFF; --cxc-ds-sand:#FAF7F2; --cxc-ds-stone:#E7E1D8; --cxc-ds-warm-slate:#7A7268; /* --------------------------------------------------------------------- STATUS — shared. Feedback only: alerts, form validation, system messages. Never decorative and never a brand accent. --------------------------------------------------------------------- */ --cxc-ds-success:#1E7A5A; --cxc-ds-success-deep:#12523C; --cxc-ds-success-tint:#E2F1EB; --cxc-ds-warning:#B26A00; --cxc-ds-warning-deep:#7A4900; --cxc-ds-warning-tint:#FBEEDA; --cxc-ds-error:#B3182C; --cxc-ds-error-deep:#7E101F; --cxc-ds-error-tint:#FAE4E7; --cxc-ds-info:#2C4880; --cxc-ds-info-deep:#1B2F52; --cxc-ds-info-tint:#E0E7F2; /* --------------------------------------------------------------------- ROLES — light grounds. Stylesheets should use these, not raw steps. --------------------------------------------------------------------- */ --cxc-ds-text:var(--cxc-ds-ink); /* 15.82:1 on white */ --cxc-ds-text-muted:var(--cxc-ds-slate); /* 5.18:1 */ --cxc-ds-heading:var(--cxc-ds-graphite-700); /* 9.40:1 */ --cxc-ds-bg:var(--cxc-ds-white); --cxc-ds-bg-subtle:var(--cxc-ds-graphite-50); --cxc-ds-bg-warm:var(--cxc-ds-sand); --cxc-ds-bg-highlight:var(--cxc-ds-gold-tint); --cxc-ds-border:var(--cxc-ds-graphite-100); --cxc-ds-border-strong:var(--cxc-ds-graphite-300); --cxc-ds-border-warm:var(--cxc-ds-stone); /* LINKS — a deliberate departure from ACXPA/CX Skills. Graphite text links are too close to Ink body text to be told apart by colour alone (1.68:1 against Ink), so links are ALWAYS underlined: Graphite 700 text (9.40:1) with a Gold Mid underline. The underline is what identifies the link (WCAG 1.4.1); Gold Mid is decorative there. */ --cxc-ds-link:var(--cxc-ds-graphite-700); --cxc-ds-link-hover:var(--cxc-ds-graphite-900); /* 15.64:1 */ --cxc-ds-link-underline:var(--cxc-ds-gold-mid); --cxc-ds-link-underline-thickness:2px; --cxc-ds-link-underline-offset:0.18em; --cxc-ds-focus:var(--cxc-ds-graphite-700); --cxc-ds-focus-on-dark:var(--cxc-ds-gold); /* Buttons */ --cxc-ds-btn-primary-bg:var(--cxc-ds-gold); --cxc-ds-btn-primary-text:var(--cxc-ds-ink); /* 8.49:1 */ --cxc-ds-btn-primary-bg-hover:var(--cxc-ds-gold-mid); --cxc-ds-btn-secondary-bg:var(--cxc-ds-graphite-700); --cxc-ds-btn-secondary-text:var(--cxc-ds-white); /* 9.40:1 */ --cxc-ds-btn-secondary-bg-hover:var(--cxc-ds-graphite-900); /* Pills / tags */ --cxc-ds-pill-bg:var(--cxc-ds-graphite-50); --cxc-ds-pill-text:var(--cxc-ds-graphite-700); /* 8.61:1 */ --cxc-ds-pill-border:var(--cxc-ds-graphite-100); /* --------------------------------------------------------------------- ROLES — dark grounds (Graphite 700, 800, 900 bands, the footer). Text on a dark band is SOLID, never white at reduced opacity. Ratios below are on Graphite 700. --------------------------------------------------------------------- */ --cxc-ds-band:var(--cxc-ds-graphite-700); --cxc-ds-band-deep:var(--cxc-ds-graphite-900); --cxc-ds-text-on-dark:var(--cxc-ds-white); /* 9.40:1 */ --cxc-ds-text-muted-on-dark:var(--cxc-ds-graphite-100); /* 7.31:1. Graphite 100/200 are text colours on dark grounds ONLY — on white they fail (1.29 / 1.67). */ --cxc-ds-accent-on-dark:var(--cxc-ds-gold); /* 5.05:1 — kicker text, eyebrows */ --cxc-ds-border-on-dark:var(--cxc-ds-graphite-300); /* 3.97:1 — clears 3:1 for UI edges */ /* --------------------------------------------------------------------- TYPE — Poppins carries every role, as on ACXPA and CX Skills. NOTE: Poppins is not loaded on cxconsult.com.au yet. Until the fonts step ships, --cxc-ds-font falls through to the system font. --------------------------------------------------------------------- */ --cxc-ds-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --cxc-ds-weight-regular:400; --cxc-ds-weight-medium:500; --cxc-ds-weight-semibold:600; --cxc-ds-weight-bold:700; --cxc-ds-text-display:clamp( calc(2.25rem * var(--cxc-ds-root-scale)), calc(1.5rem * var(--cxc-ds-root-scale)) + 3.2vw, calc(3.25rem * var(--cxc-ds-root-scale))); /* 36 -> 52px */ --cxc-ds-text-h1:clamp( calc(1.875rem * var(--cxc-ds-root-scale)), calc(1.4rem * var(--cxc-ds-root-scale)) + 2vw, calc(2.5rem * var(--cxc-ds-root-scale))); /* 30 -> 40px */ --cxc-ds-text-h2:calc(1.875rem * var(--cxc-ds-root-scale)); /* 30px */ --cxc-ds-text-h3:calc(1.375rem * var(--cxc-ds-root-scale)); /* 22px */ --cxc-ds-text-h4:calc(1.125rem * var(--cxc-ds-root-scale)); /* 18px */ --cxc-ds-text-lead:calc(1.25rem * var(--cxc-ds-root-scale)); /* 20px */ --cxc-ds-text-body:calc(1rem * var(--cxc-ds-root-scale)); /* 16px */ --cxc-ds-text-small:calc(0.875rem * var(--cxc-ds-root-scale)); /* 14px */ --cxc-ds-text-caption:calc(0.75rem * var(--cxc-ds-root-scale)); /* 12px */ --cxc-ds-text-eyebrow:calc(0.8125rem * var(--cxc-ds-root-scale)); /* 13px */ --cxc-ds-tracking-eyebrow:0.12em; --cxc-ds-leading-tight:1.12; --cxc-ds-leading-snug:1.32; --cxc-ds-leading-body:1.65; /* --------------------------------------------------------------------- SPACE — 4px base grid. --------------------------------------------------------------------- */ --cxc-ds-space-2xs:calc(0.25rem * var(--cxc-ds-root-scale)); /* 4px */ --cxc-ds-space-xs:calc(0.5rem * var(--cxc-ds-root-scale)); /* 8px */ --cxc-ds-space-sm:calc(0.75rem * var(--cxc-ds-root-scale)); /* 12px */ --cxc-ds-space-md:calc(1rem * var(--cxc-ds-root-scale)); /* 16px */ --cxc-ds-space-lg:calc(1.5rem * var(--cxc-ds-root-scale)); /* 24px */ --cxc-ds-space-xl:calc(2rem * var(--cxc-ds-root-scale)); /* 32px */ --cxc-ds-space-2xl:calc(3rem * var(--cxc-ds-root-scale)); /* 48px */ --cxc-ds-space-3xl:calc(4rem * var(--cxc-ds-root-scale)); /* 64px */ --cxc-ds-space-4xl:calc(6rem * var(--cxc-ds-root-scale)); /* 96px */ --cxc-ds-content-max:1180px; /* --------------------------------------------------------------------- RADIUS + ELEVATION — px by design. Shadows are Graphite-tinted. --------------------------------------------------------------------- */ --cxc-ds-radius-sm:4px; --cxc-ds-radius-md:8px; --cxc-ds-radius-lg:12px; --cxc-ds-radius-xl:20px; --cxc-ds-radius-pill:999px; --cxc-ds-shadow-sm:0 1px 2px color-mix(in srgb, var(--cxc-ds-graphite-900) 8%, transparent); --cxc-ds-shadow-md:0 2px 8px color-mix(in srgb, var(--cxc-ds-graphite-900) 10%, transparent); --cxc-ds-shadow-lg:0 8px 24px color-mix(in srgb, var(--cxc-ds-graphite-900) 12%, transparent); }