/* ========================================================================== WPGuy Starter Kit: Design Tokens Version: 1.4.0 ARCHITECTURE — TWO LAYERS: LAYER 1 — PRIMITIVES Defined in GeneratePress Customiser > Global Colours. GP automatically generates CSS variables from your slug names. Example: a slug of "brand-primary" becomes var(--brand-primary). This file does not define most primitives — it consumes them. Required slugs in every GP Customiser setup: neutral-0, neutral-50, neutral-100, neutral-200, neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-900, neutral-950, neutral-1000, brand-primary, brand-primary-alt, brand-secondary, brand-secondary-alt Optional extended brand slugs (add to GP Customiser when needed): brand-tertiary, brand-tertiary-alt brand-quaternary, brand-quaternary-alt brand-quinary, brand-quinary-alt brand-senary, brand-senary-alt UTILITY COLOUR PRIMITIVES Utility colours (success, danger, warning, info) are NOT stored in the GP Customiser — they are not client-facing colours and do not need to appear as swatches. They are defined here directly so that semantic tokens below can reference them without relying on GP-generated variables. LAYER 2 — SEMANTICS Defined here. Maps purpose-named tokens to primitives. All theme code references semantic tokens only. Never reference GP primitive variables outside this file. ========================================================================== */ :root { /* -------------------------------------------------------------------------- UTILITY COLOUR PRIMITIVES Hardcoded here — not sourced from GP Customiser. WCAG AA verified: success/danger on white, warning/info on white. -------------------------------------------------------------------------- */ --utility-success: #15803d; --utility-success-alt: #dcfce7; --utility-danger: #b91c1c; --utility-danger-alt: #fee2e2; --utility-warning: #b45309; --utility-warning-alt: #fef3c7; --utility-info: #0369a1; --utility-info-alt: #e0f2fe; /* -------------------------------------------------------------------------- TEXT -------------------------------------------------------------------------- */ --color-text: var(--neutral-600); /* Body copy */ --color-text-muted: var(--neutral-500); /* Secondary text, captions */ --color-text-subtle: var(--neutral-400); /* Placeholder, disabled */ --color-text-strong: var(--neutral-800); /* Emphasis, bold passages */ --color-text-inverted: var(--neutral-0); /* Text on dark backgrounds */ --color-heading: var(--neutral-700); /* All heading levels */ /* -------------------------------------------------------------------------- BACKGROUNDS -------------------------------------------------------------------------- */ --color-bg: var(--neutral-0); /* Page / card background */ --color-bg-subtle: var(--neutral-50); /* Page background wash */ --color-bg-muted: var(--neutral-100); /* Inputs, code blocks */ --color-bg-inverted: var(--neutral-900); /* Dark sections */ /* -------------------------------------------------------------------------- BORDERS -------------------------------------------------------------------------- */ --color-border: var(--neutral-200); /* Default borders */ --color-border-strong: var(--neutral-300); /* Dividers, emphasis */ --color-border-subtle: var(--neutral-100); /* Hairlines */ /* -------------------------------------------------------------------------- BRAND PRIMARY Core brand colour. Drives links, buttons, focus rings, and interactive elements by default. -------------------------------------------------------------------------- */ --color-primary: var(--brand-primary); --color-primary-alt: var(--brand-primary-alt); --color-primary-link: var(--brand-primary); --color-primary-link-hover: var(--brand-primary-alt); --color-primary-btn-bg: var(--brand-primary); --color-primary-btn-bg-hover: var(--brand-primary-alt); --color-primary-btn-text: var(--neutral-0); --color-primary-btn-text-hover: var(--neutral-0); --color-primary-focus: var(--brand-primary); /* -------------------------------------------------------------------------- BRAND SECONDARY Supporting brand colour. Use for dark sections, footers, and secondary interactive elements. -------------------------------------------------------------------------- */ --color-secondary: var(--brand-secondary); --color-secondary-alt: var(--brand-secondary-alt); --color-secondary-link: var(--brand-secondary); --color-secondary-link-hover: var(--brand-secondary-alt); --color-secondary-btn-bg: var(--brand-secondary); --color-secondary-btn-bg-hover: var(--brand-secondary-alt); --color-secondary-btn-text: var(--neutral-0); --color-secondary-btn-text-hover: var(--neutral-0); --color-secondary-focus: var(--brand-secondary); /* -------------------------------------------------------------------------- BRAND TERTIARY (optional) Add brand-tertiary and brand-tertiary-alt to GP Customiser to activate. Typically used for subtle section backgrounds and accent elements. -------------------------------------------------------------------------- */ --color-tertiary: var(--brand-tertiary); --color-tertiary-alt: var(--brand-tertiary-alt); --color-tertiary-link: var(--brand-tertiary); --color-tertiary-link-hover: var(--brand-tertiary-alt); --color-tertiary-btn-bg: var(--brand-tertiary); --color-tertiary-btn-bg-hover: var(--brand-tertiary-alt); --color-tertiary-btn-text: var(--neutral-900); --color-tertiary-btn-text-hover: var(--neutral-900); --color-tertiary-focus: var(--brand-tertiary); /* -------------------------------------------------------------------------- BRAND QUATERNARY (optional) Add brand-quaternary and brand-quaternary-alt to GP Customiser to activate. -------------------------------------------------------------------------- */ --color-quaternary: var(--brand-quaternary); --color-quaternary-alt: var(--brand-quaternary-alt); --color-quaternary-link: var(--brand-quaternary); --color-quaternary-link-hover: var(--brand-quaternary-alt); --color-quaternary-btn-bg: var(--brand-quaternary); --color-quaternary-btn-bg-hover: var(--brand-quaternary-alt); --color-quaternary-btn-text: var(--neutral-0); --color-quaternary-btn-text-hover: var(--neutral-0); --color-quaternary-focus: var(--brand-quaternary); /* -------------------------------------------------------------------------- BRAND QUINARY (optional) Add brand-quinary and brand-quinary-alt to GP Customiser to activate. -------------------------------------------------------------------------- */ --color-quinary: var(--brand-quinary); --color-quinary-alt: var(--brand-quinary-alt); --color-quinary-link: var(--brand-quinary); --color-quinary-link-hover: var(--brand-quinary-alt); --color-quinary-btn-bg: var(--brand-quinary); --color-quinary-btn-bg-hover: var(--brand-quinary-alt); --color-quinary-btn-text: var(--neutral-0); --color-quinary-btn-text-hover: var(--neutral-0); --color-quinary-focus: var(--brand-quinary); /* -------------------------------------------------------------------------- BRAND SENARY (optional) Add brand-senary and brand-senary-alt to GP Customiser to activate. -------------------------------------------------------------------------- */ --color-senary: var(--brand-senary); --color-senary-alt: var(--brand-senary-alt); --color-senary-link: var(--brand-senary); --color-senary-link-hover: var(--brand-senary-alt); --color-senary-btn-bg: var(--brand-senary); --color-senary-btn-bg-hover: var(--brand-senary-alt); --color-senary-btn-text: var(--neutral-0); --color-senary-btn-text-hover: var(--neutral-0); --color-senary-focus: var(--brand-senary); /* -------------------------------------------------------------------------- LINKS Default link style — uses primary brand colour. Override per component using the per-colour link tokens above. -------------------------------------------------------------------------- */ --color-link: var(--brand-primary); --color-link-hover: var(--brand-primary-alt); /* -------------------------------------------------------------------------- BUTTONS Default button style — uses primary brand colour. Override per component using the per-colour button tokens above. -------------------------------------------------------------------------- */ --color-btn-bg: var(--brand-primary); --color-btn-bg-hover: var(--brand-primary-alt); --color-btn-text: var(--neutral-0); --color-btn-text-hover: var(--neutral-0); /* -------------------------------------------------------------------------- FOCUS Default focus ring — uses primary brand colour. Override per component using the per-colour focus tokens above. -------------------------------------------------------------------------- */ --color-focus: var(--brand-primary); /* -------------------------------------------------------------------------- UTILITY — SUCCESS -------------------------------------------------------------------------- */ --color-success: var(--utility-success); --color-success-bg: var(--utility-success-alt); /* -------------------------------------------------------------------------- UTILITY — DANGER -------------------------------------------------------------------------- */ --color-danger: var(--utility-danger); --color-danger-bg: var(--utility-danger-alt); /* -------------------------------------------------------------------------- UTILITY — WARNING -------------------------------------------------------------------------- */ --color-warning: var(--utility-warning); --color-warning-bg: var(--utility-warning-alt); /* -------------------------------------------------------------------------- UTILITY — INFO -------------------------------------------------------------------------- */ --color-info: var(--utility-info); --color-info-bg: var(--utility-info-alt); /* -------------------------------------------------------------------------- SPACING — PRIMITIVE SCALE Based on the 8px grid. Fixed for component level, fluid for layout level. -------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px — micro */ --space-2: 0.5rem; /* 8px — tight */ --space-3: 0.75rem; /* 12px — snug */ --space-4: 1rem; /* 16px — base */ --space-5: 1.5rem; /* 24px — comfortable */ --space-6: 2rem; /* 32px — relaxed */ --space-7: clamp(2.5rem, 2.3571rem + 0.7143vw, 3rem); /* 40px -> 48px */ --space-8: clamp(3rem, 2.7143rem + 1.4286vw, 4rem); /* 48px -> 64px */ --space-9: clamp(4rem, 3.4286rem + 2.8571vw, 6rem); /* 64px -> 96px */ --space-10: clamp(5rem, 4.1429rem + 4.2857vw, 8rem); /* 80px -> 128px */ /* -------------------------------------------------------------------------- SPACING — SEMANTIC TOKENS Use these in all stylesheets. Never reference --space-N directly. -------------------------------------------------------------------------- */ --spacing-gap-tight: var(--space-2); /* Tight inline gaps */ --spacing-gap: var(--space-5); /* Default gb-container gap */ --spacing-gap-loose: var(--space-6); /* Loose container gap */ --spacing-inline: var(--space-3); /* Inline element spacing */ --spacing-component: var(--space-5); /* Internal component padding */ --spacing-card: var(--space-5); /* Card padding */ --spacing-section-sm: var(--space-7); /* Small section vertical padding */ --spacing-section: var(--space-8); /* Standard section vertical padding */ --spacing-section-lg: var(--space-9); /* Large section vertical padding */ --spacing-hero: var(--space-10); /* Hero block vertical padding */ } /* ========================================================================== GP VARIABLE BRIDGE Maps every CSS variable GP's dynamic stylesheet consumes to our semantic tokens. Must remain unlayered so it wins over GP's own output. Do not move this inside any @layer block. ========================================================================== */ :root { /* Body */ --base: var(--color-bg); --contrast: var(--color-text); --accent: var(--color-link); /* Text variants GP uses for secondary/muted text */ --contrast-2: var(--color-text-muted); --contrast-3: var(--color-border-strong); /* Background variants GP uses for inputs and sidebars */ --base-2: var(--color-bg); --base-3: var(--color-bg-subtle); /* Buttons */ --brand-main: var(--color-btn-bg); --brand-contrast: var(--color-btn-text); }