/* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Semantic Tokens (Light Theme Default) ──────────────────────────────────────────────────────────────────── Tier 2 of 3. Intent-driven tokens that describe WHAT a value means, not WHAT it looks like. Components consume these — never primitives. Each semantic token references a primitive, allowing themes to re-map by changing only the primitive reference (see themes.dark.css). Token taxonomy (organized by purpose): • surface — Background fills (page, panel, overlay, sunken) • text — Typography colors (primary, secondary, tertiary, on-X) • border — Outline strokes (subtle, strong, focus) • action — Interactive elements (primary CTA, subtle, danger) • status — Communication (success, warning, danger, info) + soft • shadow — Elevation (re-mapped per theme to handle dark glow) • brand — Tenant/customer override hooks (Phase B) This file declares the LIGHT theme defaults. Dark theme overrides are in themes.dark.css and ONLY re-declare the semantic tokens below — never adds new selectors or component rules. Version: 1.0.0 Last revised: 2026-05-09 ──────────────────────────────────────────────────────────────────── */ :root { /* ───────────────────────────────────────────────────────────── SURFACE — Background fills, ordered by elevation ───────────────────────────────────────────────────────────── */ /** Page-level background. Lowest elevation. */ --pf-color-surface-base: var(--pf-color-slate-50); /** Panel / card / sidebar. Sits on surface-base. */ --pf-color-surface-raised: var(--pf-color-white); /** Modal / drawer / popover. Sits above all panels. */ --pf-color-surface-overlay: var(--pf-color-white); /** Inputs, code blocks, sunken UI. Below surface-base. */ --pf-color-surface-sunken: var(--pf-color-slate-100); /** Hover state for any interactive surface. */ --pf-color-surface-hover: var(--pf-color-slate-100); /** Selected/active state for interactive surface. */ --pf-color-surface-selected: var(--pf-color-indigo-50); /** Disabled surface. Reduced contrast intentional. */ --pf-color-surface-disabled: var(--pf-color-slate-100); /* ───────────────────────────────────────────────────────────── TEXT — Foreground colors, ordered by emphasis Each verified WCAG AA on surface-raised. ───────────────────────────────────────────────────────────── */ /** Headings, body text, primary content. Highest emphasis. */ --pf-color-text-primary: var(--pf-color-slate-900); /** Subtitles, labels, supporting copy. Medium emphasis. */ --pf-color-text-secondary: var(--pf-color-slate-700); /** Helper text, captions, meta. Lower emphasis. */ --pf-color-text-tertiary: var(--pf-color-slate-500); /** Disabled text. Below WCAG AA — only for non-interactive disabled state. */ --pf-color-text-disabled: var(--pf-color-slate-400); /** Text on top of action-primary background (e.g. inside buttons). */ --pf-color-text-on-action: var(--pf-color-white); /** Text on top of status-{X}-soft backgrounds. */ --pf-color-text-on-status: var(--pf-color-white); /** Inverse text — for tooltips, dark cards on light surfaces. */ --pf-color-text-inverse: var(--pf-color-white); /* ───────────────────────────────────────────────────────────── BORDER — Stroke colors ───────────────────────────────────────────────────────────── */ /** Subtle dividers between content sections. */ --pf-color-border-subtle: var(--pf-color-slate-200); /** Strong outlines (form fields, buttons, cards). */ --pf-color-border-strong: var(--pf-color-slate-300); /** Keyboard focus indicator. WCAG 2.4.7 compliant. */ --pf-color-border-focus: var(--pf-color-indigo-500); /** Inverted border (for dark surfaces in light theme). */ --pf-color-border-inverse: var(--pf-color-slate-700); /* ───────────────────────────────────────────────────────────── ACTION — Interactive element colors (CTAs, links) Action colors use indigo by default; tenant brand can override via the brand layer (Phase B). ───────────────────────────────────────────────────────────── */ /** Primary CTA background. HF 2026-05-11: was indigo-600 — switched to Platforma brand red so marketing, admin chrome, and the editor share one primary action color (red as the platform brand identity). Tenants can still override per-tenant brand via --tenant-primary (the admin-themed.css layer applies that on top, which is the intended multi-tenant override). Danger remains red-600 from the separate red-* primitives so primary + destructive never collide visually. */ --pf-color-action-primary: var(--pf-color-platforma-500); /** Primary CTA hover. */ --pf-color-action-primary-hover: var(--pf-color-platforma-600); /** Primary CTA pressed (:active). */ --pf-color-action-primary-pressed: var(--pf-color-platforma-700); /** Primary CTA tinted background (badges, soft CTAs). */ --pf-color-action-primary-soft: var(--pf-color-platforma-50); /** Primary CTA tinted hover. */ --pf-color-action-primary-soft-hover: var(--pf-color-platforma-100); /** Subtle/secondary action (ghost button, low-emphasis CTA). */ --pf-color-action-subtle: var(--pf-color-slate-100); /** Subtle action hover. */ --pf-color-action-subtle-hover: var(--pf-color-slate-200); /** Danger/destructive action (delete, remove). */ --pf-color-action-danger: var(--pf-color-red-600); /** Danger action hover. */ --pf-color-action-danger-hover: var(--pf-color-red-700); /** Danger action soft (delete-confirmation backgrounds). */ --pf-color-action-danger-soft: var(--pf-color-red-50); /* ───────────────────────────────────────────────────────────── STATUS — Communication colors Each status has -fg (foreground), -bg (solid bg), -soft (tint), and -border (outline). Used by alerts, badges, banners. ───────────────────────────────────────────────────────────── */ /* Success */ --pf-color-status-success: var(--pf-color-emerald-600); --pf-color-status-success-soft: var(--pf-color-emerald-50); --pf-color-status-success-border: var(--pf-color-emerald-200); --pf-color-status-success-fg: var(--pf-color-emerald-800); /* Warning */ --pf-color-status-warning: var(--pf-color-amber-500); --pf-color-status-warning-soft: var(--pf-color-amber-50); --pf-color-status-warning-border: var(--pf-color-amber-200); --pf-color-status-warning-fg: var(--pf-color-amber-800); /* Danger */ --pf-color-status-danger: var(--pf-color-red-600); --pf-color-status-danger-soft: var(--pf-color-red-50); --pf-color-status-danger-border: var(--pf-color-red-200); --pf-color-status-danger-fg: var(--pf-color-red-800); /* Info */ --pf-color-status-info: var(--pf-color-sky-600); --pf-color-status-info-soft: var(--pf-color-sky-50); --pf-color-status-info-border: var(--pf-color-sky-200); --pf-color-status-info-fg: var(--pf-color-sky-800); /* ───────────────────────────────────────────────────────────── SHADOW — Elevation (re-mapped in dark theme for glow effect) ───────────────────────────────────────────────────────────── */ --pf-color-shadow-sm: var(--pf-shadow-sm); --pf-color-shadow-md: var(--pf-shadow-md); --pf-color-shadow-lg: var(--pf-shadow-lg); --pf-color-shadow-xl: var(--pf-shadow-xl); --pf-color-shadow-2xl: var(--pf-shadow-2xl); /* ───────────────────────────────────────────────────────────── FOCUS RING — Keyboard accessibility outline Single source of truth for focus indicators across all interactive components. ───────────────────────────────────────────────────────────── */ --pf-focus-ring: 0 0 0 2px var(--pf-color-surface-raised), 0 0 0 4px var(--pf-color-border-focus); --pf-focus-ring-offset: 2px; }