Tokens & Styling

WAGE uses CSS custom properties (design tokens) to separate brand identity from structural layout.

Token layers

1. Core defaults (inc/core/css/tokens.css)

Neutral, brandless defaults. These provide sensible fallbacks so the framework works out of the box:

:root {
    --primary: #333;
    --primary-light: #555;
    --primary-dark: #111;
    --accent: #666;
    --heading-font-family: system-ui, sans-serif;
    --text-font-family: system-ui, sans-serif;
    /* ... */
}

2. Brand overrides (assets/css/tokens.css in child theme)

The child theme overrides only the tokens that differ:

:root {
    --primary: #1b4332;
    --primary-light: #2d6a4f;
    --primary-dark: #0d261d;
    --accent: #c9a962;
    --heading-font-family: 'Playfair Display', serif;
    --text-font-family: 'Inter', sans-serif;
}

3. Visual styling (assets/css/site.css in child theme)

All visual styling — gradients, shadows, animations, hover effects, page-specific layouts — lives here. This is the only file that should contain hardcoded rgba values or brand-specific visual details.

Key tokens

Token	Purpose
--primary, --primary-light, --primary-dark	Primary brand colour
--accent, --accent-light, --accent-dark	Accent colour
--body-bg-color	Page background
--base-ultra-light, --neutral-light, --neutral-dark	Neutral palette
--bg-tint-1, --bg-tint-2	Section background tints
--heading-font-family	Headings
--text-font-family	Body text

Rules

• Core CSS (core.css) uses only CSS variables — no hardcoded brand colours.
• site.css is where brand-specific rgba values go — gradients, auras, glassmorphism, etc.
• Tokens cascade: core defaults → child overrides. Only override what changes.