/* * Car Event Pro — Design Tokens * ============================================================ * Single source of truth for all visual design decisions. * * Tier 1 — Primitive tokens * Raw values. Never reference these directly in components; * always go through a semantic token. * * Tier 2 — Semantic tokens * Named by role, not value. These are what frontend.css and * admin.css use. Branding overrides (G3) only need to touch * the two --carevent-brand-* primitives. * * PHP override hook (G3) * wp_add_inline_style( 'carevent-tokens', ':root { ... }' ) * targeting only --carevent-brand-primary and/or * --carevent-brand-accent from Settings::get('brand_*'). */ /* ── Tier 1: Primitives ─────────────────────────────────── */ :root { /* Brand — the two values PHP may override */ --carevent-brand-primary: #0a4fff; --carevent-brand-accent: #ff6b00; /* Palette — fixed, never overridden by branding */ --carevent-red-600: #b00020; --carevent-red-700: #b32d2e; --carevent-green-700: #0f7b3c; --carevent-amber-300: #ffe08a; --carevent-amber-400: #ffb703; --carevent-amber-900: #5a3d00; --carevent-yellow-50: #fff8e1; --carevent-orange-800: #b25b00; --carevent-grey-50: #fafafa; --carevent-grey-100: #f3f3f3; --carevent-grey-150: #f1f1f1; --carevent-grey-200: #e0e0e0; --carevent-grey-300: #c9c9c9; --carevent-grey-400: #9aa0a6; --carevent-grey-500: #6b6b6b; --carevent-grey-550: #5a5a5a; --carevent-grey-600: #4b4b4b; --carevent-grey-700: #333; --carevent-grey-800: #1f1f1f; --carevent-grey-900: #0f0f0f; --carevent-black: #000; --carevent-white: #ffffff; /* WP Admin palette — used only in admin.css */ --carevent-wp-blue: #2271b1; --carevent-wp-blue-hover: #135e96; --carevent-wp-text: #1d2327; --carevent-wp-muted: #5a5f64; --carevent-wp-muted-2: #a7aaad; --carevent-wp-border: #c3c4c7; --carevent-wp-border-hover: #8c8f94; --carevent-wp-surface-alt: #f6f7f7; --carevent-wp-surface-hover: #eaeaec; /* Status palette */ --carevent-success-bg: #e6f6ea; --carevent-success-border: #b9e2c3; --carevent-warning-bg: #fff3e0; --carevent-warning-border: #f1d3a5; --carevent-warning-text: #b25b00; --carevent-error-bg: #fdecea; --carevent-error-border: #f3c0c1; /* Typography */ --carevent-font: "Work Sans", "Trebuchet MS", Verdana, sans-serif; /* Shape */ --carevent-form-max-width: 640px; --carevent-radius-xs: 4px; --carevent-radius-sm: 6px; --carevent-radius-md: 8px; --carevent-radius-lg: 10px; --carevent-radius-full: 999px; /* Motion */ --carevent-transition: 150ms ease; } /* ── Tier 2: Semantic tokens ────────────────────────────── */ :root { /* Interactive / brand */ --carevent-color-interactive: var(--carevent-brand-primary); --carevent-color-interactive-hover: color-mix(in srgb, var(--carevent-brand-primary), #000 12%); --carevent-color-interactive-active: color-mix(in srgb, var(--carevent-brand-primary), #000 22%); --carevent-color-interactive-disabled: var(--carevent-grey-300); --carevent-color-interactive-focus: var(--carevent-brand-primary); --carevent-color-interactive-glow: rgba(10, 79, 255, 0.35); /* Accent */ --carevent-color-accent: var(--carevent-brand-accent); /* Status */ --carevent-color-error: var(--carevent-red-600); --carevent-color-error-alt: var(--carevent-red-700); --carevent-color-success: var(--carevent-green-700); --carevent-color-warning: var(--carevent-orange-800); /* Surfaces */ --carevent-color-surface: var(--carevent-white); --carevent-color-surface-alt: var(--carevent-grey-100); --carevent-color-surface-faint: var(--carevent-grey-50); --carevent-color-surface-muted: var(--carevent-grey-150); --carevent-color-surface-notice: var(--carevent-yellow-50); /* Gradients (expressed as gradient strings) */ --carevent-gradient-form: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); --carevent-gradient-section: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%); --carevent-gradient-card: linear-gradient(180deg, #fafafa 0%, #f3f5f9 100%); --carevent-gradient-message: linear-gradient(180deg, #f6f6f6 0%, #efefef 100%); --carevent-gradient-modal: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%); /* Borders */ --carevent-color-border: var(--carevent-grey-200); --carevent-color-border-faint: #eee; --carevent-color-border-input: var(--carevent-grey-300); /* Text */ --carevent-color-text: var(--carevent-grey-900); --carevent-color-text-strong: var(--carevent-black); --carevent-color-text-muted: var(--carevent-grey-500); --carevent-color-text-subtle: var(--carevent-grey-600); --carevent-color-text-dark: var(--carevent-grey-800); /* Overlays */ --carevent-overlay-locked: rgba(255, 255, 255, 0.6); --carevent-overlay-modal: rgba(0, 0, 0, 0.55); --carevent-overlay-lightbox: rgba(0, 0, 0, 0.8); --carevent-overlay-shadow-sm: rgba(0, 0, 0, 0.18); --carevent-overlay-shadow-md: rgba(0, 0, 0, 0.20); --carevent-overlay-confirm: rgba(0, 0, 0, 0.5); --carevent-overlay-spinner: rgba(255, 255, 255, 0.4); /* Winner / gold */ --carevent-color-gold: var(--carevent-amber-400); --carevent-color-gold-bg: var(--carevent-amber-300); --carevent-color-gold-text: var(--carevent-amber-900); --carevent-color-gold-glow: rgba(255, 183, 3, 0.2); /* Badge (generic neutral) */ --carevent-color-badge-bg: var(--carevent-grey-200); --carevent-color-badge-text: var(--carevent-grey-700); /* Tooltip */ --carevent-color-tooltip-bg: #1f2328; --carevent-color-tooltip-text: var(--carevent-white); /* Ghost button */ --carevent-color-ghost-bg: var(--carevent-grey-150); --carevent-color-ghost-text: var(--carevent-grey-800); } /* ── Dark mode ──────────────────────────────────────────── */ /* * Dark mode overrides are NOT placed here on :root. * Scoping them to :root would affect WP Admin, which manages * its own colour scheme independently of prefers-color-scheme. * The overrides live in frontend.css, scoped to the shortcode * wrapper classes (.carevent-form, .carevent-voting) * so only frontend output adapts. */ /* Light-mode defaults for tokens referenced only in dark contexts */ :root { --carevent-color-text-modal-body: #444; --carevent-color-surface-disabled: var(--carevent-color-surface-alt); --carevent-color-text-disabled: var(--carevent-color-text-muted); }