@charset "utf-8"; /* ==== css/pf/tokens.primitive.css ==== */ /* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Primitive Tokens ──────────────────────────────────────────────────────────────────── Tier 1 of 3. Raw, immutable design values. NEVER consume these directly in component CSS — always go through the Semantic tier (tokens.semantic.css). This separation is what makes themes work. Includes: • Color palettes (slate, indigo, red, amber, emerald, sky) • Spacing scale (8-point grid, t-shirt sized) • Radius scale • Shadow scale • Typography scale (font-family, size, weight, line-height) • Motion (duration, easing) • Z-index scale Conventions: • Color steps use 50-950 scale (Tailwind v4 / Radix Colors) • Spacing uses --pf-space-{N} where N indicates rem multiplier at 0.25rem increments (4 = 1rem, 8 = 2rem) • All values are static — themes ONLY override Semantic tier Version: 1.0.0 Last revised: 2026-05-09 ──────────────────────────────────────────────────────────────────── */ :root { /* ───────────────────────────────────────────────────────────── COLOR — Slate (neutral chrome: surface, text, border) Uses CIELAB-tuned grays for perceptually uniform contrast steps. ───────────────────────────────────────────────────────────── */ --pf-color-slate-50: #f8fafc; --pf-color-slate-100: #f1f5f9; --pf-color-slate-200: #e2e8f0; --pf-color-slate-300: #cbd5e1; --pf-color-slate-400: #94a3b8; --pf-color-slate-500: #64748b; --pf-color-slate-600: #475569; --pf-color-slate-700: #334155; --pf-color-slate-800: #1e293b; --pf-color-slate-900: #0f172a; --pf-color-slate-950: #020617; /* ───────────────────────────────────────────────────────────── COLOR — Indigo (action, focus, brand-accent) ───────────────────────────────────────────────────────────── */ --pf-color-indigo-50: #eef2ff; --pf-color-indigo-100: #e0e7ff; --pf-color-indigo-200: #c7d2fe; --pf-color-indigo-300: #a5b4fc; --pf-color-indigo-400: #818cf8; --pf-color-indigo-500: #6366f1; --pf-color-indigo-600: #4f46e5; --pf-color-indigo-700: #4338ca; --pf-color-indigo-800: #3730a3; --pf-color-indigo-900: #312e81; --pf-color-indigo-950: #1e1b4b; /* ───────────────────────────────────────────────────────────── COLOR — Platforma brand red (primary action across platform) ───────────────────────────────────────────────────────────── HF 2026-05-11. Separate scale from --pf-color-red-* (danger) so primary CTAs and destructive actions never collide. Mapped from brand spec D4213D + the existing tenant-primary palette used by Nordic Ruby theme; derived darker/lighter shades via 12-24% mix. Used by --pf-color-action-primary in tokens.semantic.css. */ --pf-color-platforma-50: #fdf1f3; --pf-color-platforma-100: #fbdcdf; --pf-color-platforma-200: #f6b3bb; --pf-color-platforma-300: #ee8895; --pf-color-platforma-400: #e15869; --pf-color-platforma-500: #d4213d; --pf-color-platforma-600: #b91c36; --pf-color-platforma-700: #9f1730; --pf-color-platforma-800: #7a1124; --pf-color-platforma-900: #5c0b1b; --pf-color-platforma-950: #2c0610; /* ───────────────────────────────────────────────────────────── COLOR — Red (status: danger, destructive) ───────────────────────────────────────────────────────────── */ --pf-color-red-50: #fef2f2; --pf-color-red-100: #fee2e2; --pf-color-red-200: #fecaca; --pf-color-red-300: #fca5a5; --pf-color-red-400: #f87171; --pf-color-red-500: #ef4444; --pf-color-red-600: #dc2626; --pf-color-red-700: #b91c1c; --pf-color-red-800: #991b1b; --pf-color-red-900: #7f1d1d; --pf-color-red-950: #450a0a; /* ───────────────────────────────────────────────────────────── COLOR — Amber (status: warning, attention) ───────────────────────────────────────────────────────────── */ --pf-color-amber-50: #fffbeb; --pf-color-amber-100: #fef3c7; --pf-color-amber-200: #fde68a; --pf-color-amber-300: #fcd34d; --pf-color-amber-400: #fbbf24; --pf-color-amber-500: #f59e0b; --pf-color-amber-600: #d97706; --pf-color-amber-700: #b45309; --pf-color-amber-800: #92400e; --pf-color-amber-900: #78350f; --pf-color-amber-950: #451a03; /* ───────────────────────────────────────────────────────────── COLOR — Emerald (status: success, confirmation) ───────────────────────────────────────────────────────────── */ --pf-color-emerald-50: #ecfdf5; --pf-color-emerald-100: #d1fae5; --pf-color-emerald-200: #a7f3d0; --pf-color-emerald-300: #6ee7b7; --pf-color-emerald-400: #34d399; --pf-color-emerald-500: #10b981; --pf-color-emerald-600: #059669; --pf-color-emerald-700: #047857; --pf-color-emerald-800: #065f46; --pf-color-emerald-900: #064e3b; --pf-color-emerald-950: #022c22; /* ───────────────────────────────────────────────────────────── COLOR — Sky (status: info, neutral notification) ───────────────────────────────────────────────────────────── */ --pf-color-sky-50: #f0f9ff; --pf-color-sky-100: #e0f2fe; --pf-color-sky-200: #bae6fd; --pf-color-sky-300: #7dd3fc; --pf-color-sky-400: #38bdf8; --pf-color-sky-500: #0ea5e9; --pf-color-sky-600: #0284c7; --pf-color-sky-700: #0369a1; --pf-color-sky-800: #075985; --pf-color-sky-900: #0c4a6e; --pf-color-sky-950: #082f49; /* ───────────────────────────────────────────────────────────── COLOR — Pure black/white anchors ───────────────────────────────────────────────────────────── */ --pf-color-white: #ffffff; --pf-color-black: #000000; /* ───────────────────────────────────────────────────────────── SPACING — 8-point grid (rem-based for accessibility scaling) ───────────────────────────────────────────────────────────── */ --pf-space-0: 0; --pf-space-px: 1px; --pf-space-0-5: 0.125rem; /* 2px */ --pf-space-1: 0.25rem; /* 4px */ --pf-space-1-5: 0.375rem; /* 6px */ --pf-space-2: 0.5rem; /* 8px */ --pf-space-2-5: 0.625rem; /* 10px */ --pf-space-3: 0.75rem; /* 12px */ --pf-space-3-5: 0.875rem; /* 14px */ --pf-space-4: 1rem; /* 16px */ --pf-space-5: 1.25rem; /* 20px */ --pf-space-6: 1.5rem; /* 24px */ --pf-space-7: 1.75rem; /* 28px */ --pf-space-8: 2rem; /* 32px */ --pf-space-10: 2.5rem; /* 40px */ --pf-space-12: 3rem; /* 48px */ --pf-space-14: 3.5rem; /* 56px */ --pf-space-16: 4rem; /* 64px */ --pf-space-20: 5rem; /* 80px */ --pf-space-24: 6rem; /* 96px */ --pf-space-32: 8rem; /* 128px */ --pf-space-40: 10rem; /* 160px */ /* ───────────────────────────────────────────────────────────── RADIUS — Border-radius scale ───────────────────────────────────────────────────────────── */ --pf-radius-none: 0; --pf-radius-xs: 0.125rem; /* 2px — chips */ --pf-radius-sm: 0.25rem; /* 4px — inputs */ --pf-radius-md: 0.375rem; /* 6px — small cards */ --pf-radius-lg: 0.5rem; /* 8px — cards */ --pf-radius-xl: 0.75rem; /* 12px — panels */ --pf-radius-2xl: 1rem; /* 16px — modals */ --pf-radius-3xl: 1.5rem; /* 24px — hero */ --pf-radius-full: 9999px; /* pill / round */ /* ───────────────────────────────────────────────────────────── SHADOW — Elevation scale (subtle to dramatic) Tuned for light backgrounds; dark theme overrides in semantic. ───────────────────────────────────────────────────────────── */ --pf-shadow-none: none; --pf-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --pf-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10); --pf-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10); --pf-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10); --pf-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10); --pf-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --pf-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); /* ───────────────────────────────────────────────────────────── TYPOGRAPHY — Font families ───────────────────────────────────────────────────────────── */ --pf-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --pf-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; --pf-font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* ───────────────────────────────────────────────────────────── TYPOGRAPHY — Size scale (modular, ratio 1.125 minor third) ───────────────────────────────────────────────────────────── */ --pf-text-size-xs: 0.75rem; /* 12px */ --pf-text-size-sm: 0.875rem; /* 14px */ --pf-text-size-base: 1rem; /* 16px */ --pf-text-size-lg: 1.125rem; /* 18px */ --pf-text-size-xl: 1.25rem; /* 20px */ --pf-text-size-2xl: 1.5rem; /* 24px */ --pf-text-size-3xl: 1.875rem; /* 30px */ --pf-text-size-4xl: 2.25rem; /* 36px */ --pf-text-size-5xl: 3rem; /* 48px */ --pf-text-size-6xl: 3.75rem; /* 60px */ /* ───────────────────────────────────────────────────────────── TYPOGRAPHY — Weight scale ───────────────────────────────────────────────────────────── */ --pf-text-weight-thin: 100; --pf-text-weight-light: 300; --pf-text-weight-regular: 400; --pf-text-weight-medium: 500; --pf-text-weight-semibold: 600; --pf-text-weight-bold: 700; --pf-text-weight-extrabold: 800; --pf-text-weight-black: 900; /* ───────────────────────────────────────────────────────────── TYPOGRAPHY — Line-height scale ───────────────────────────────────────────────────────────── */ --pf-text-leading-none: 1; --pf-text-leading-tight: 1.25; --pf-text-leading-snug: 1.375; --pf-text-leading-normal: 1.5; --pf-text-leading-relaxed: 1.625; --pf-text-leading-loose: 2; /* ───────────────────────────────────────────────────────────── TYPOGRAPHY — Letter-spacing scale ───────────────────────────────────────────────────────────── */ --pf-text-tracking-tighter: -0.05em; --pf-text-tracking-tight: -0.025em; --pf-text-tracking-normal: 0; --pf-text-tracking-wide: 0.025em; --pf-text-tracking-wider: 0.05em; --pf-text-tracking-widest: 0.1em; /* ───────────────────────────────────────────────────────────── MOTION — Duration scale ───────────────────────────────────────────────────────────── */ --pf-motion-duration-instant: 75ms; --pf-motion-duration-fast: 150ms; --pf-motion-duration-base: 250ms; --pf-motion-duration-slow: 400ms; --pf-motion-duration-slower: 600ms; /* ───────────────────────────────────────────────────────────── MOTION — Easing curves ───────────────────────────────────────────────────────────── */ --pf-motion-ease-linear: linear; --pf-motion-ease-in: cubic-bezier(0.4, 0, 1, 1); --pf-motion-ease-out: cubic-bezier(0, 0, 0.2, 1); --pf-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --pf-motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* ───────────────────────────────────────────────────────────── Z-INDEX — Layering scale (semantic, not numeric escalation) ───────────────────────────────────────────────────────────── */ --pf-z-base: 0; --pf-z-raised: 10; /* sticky elements */ --pf-z-dropdown: 100; /* select dropdowns, autocomplete */ --pf-z-sticky: 200; /* sticky headers */ --pf-z-overlay: 500; /* drawer backdrops */ --pf-z-modal: 1000; /* modals */ --pf-z-popover: 1100; /* popovers, tooltips */ --pf-z-toast: 2000; /* toast notifications */ --pf-z-max: 2147483647; /* max signed int32 */ /* ───────────────────────────────────────────────────────────── BREAKPOINTS — Reference values for media queries (Use in `@media (min-width: var(--pf-breakpoint-md))` if your build supports it; otherwise as documentation/JS reference.) ───────────────────────────────────────────────────────────── */ --pf-breakpoint-sm: 640px; --pf-breakpoint-md: 768px; --pf-breakpoint-lg: 1024px; --pf-breakpoint-xl: 1280px; --pf-breakpoint-2xl: 1536px; } /* ==== css/pf/tokens.semantic.css ==== */ /* ════════════════════════════════════════════════════════════════════ 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); /* A11Y-TOAST-1 — amber is the outlier: it is a LIGHT fill in BOTH themes, so the shared white glyph measured 2.15:1 on amber-500 here, below 1.4.11's 3:1. The other three pass on white in this theme (emerald 3.77, red 4.83, sky 4.10). slate-950 on amber-500 measures 9.39:1. */ --pf-color-text-on-status-warning: var(--pf-color-slate-950); /** 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); /** Affirmative action (approve, publish, confirm). Same WCAG argument as danger above: --pf-color-status-success is a STATUS fill and flips to emerald-400 in dark, where white text measures 1.92:1 — and even in light, white on emerald-600 is only 3.77:1, which passes 1.4.11 for a glyph but fails 1.4.3 for a button LABEL. emerald-700 gives 5.48:1 and does not flip, so the same white text is correct in both themes. */ --pf-color-action-success: var(--pf-color-emerald-700); /* ───────────────────────────────────────────────────────────── 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; } /* ───────────────────────────────────────────────────────────── LP-12 (2026-08-31) — ADMIN-SCOPE ACTION REMAP (kun semantic- laget, aldrig primitives). I logget-ind-chromen (_Layout stempler data-area=site/admin) kører PF-primæraktioner på navy chrome- aktions-aliaset fra platforma-tokens.css i stedet for platforma- 500-rød. Marketing + PF-landing-siden har ingen data-area og beholder den usc­opede binding ovenfor. Tenant-tema-laget (admin-themed.css) er urørt og vinder fortsat sine flader. ───────────────────────────────────────────────────────────── */ body[data-area="site"], body[data-area="admin"] { --pf-color-action-primary: var(--platforma-chrome-action, #2E5C8A); --pf-color-action-primary-hover: var(--platforma-chrome-action-hover, #1B3D5E); --pf-color-action-primary-pressed: color-mix(in srgb, var(--platforma-chrome-action-hover, #1B3D5E) 85%, #000); --pf-color-action-primary-soft: var(--platforma-chrome-action-soft, #E8EEF5); --pf-color-action-primary-soft-hover: color-mix(in srgb, var(--platforma-chrome-action-soft, #E8EEF5) 88%, var(--platforma-chrome-action, #2E5C8A)); } /* ==== css/pf/tokens.semantic.admin.css ==== */ /* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Admin / Portal Semantic Band (DS-1) ──────────────────────────────────────────────────────────────────── Tier 2.5 — a thin, ADDITIVE semantic band that sits on top of tokens.semantic.css so admin/portal components can name dense-UI intents (mono emphasis, 2sm/2xs meta type, density-aware row/control heights) WITHOUT reaching into the primitive tier directly. Loaded immediately AFTER tokens.semantic.css (see _PfDesignSystem.cshtml). HARD RULES (see docs/design/ADMIN-DESIGN-SYSTEM-PLAN §B0/§B1): ✓ ADDITIVE ONLY — this file never re-declares an existing token value. Every name below is NEW. ✓ CLEAN-ROOM — our own slate primitives only. Zero Metronic bytes, zero Metronic values. `mono` is OUR slate, never Metronic's zinc. ✓ INERT — nothing consumes these tokens yet, so loading this file is a no-visual-change operation until a component opts in. ✗ Never overrides the hand-picked navy chrome hovers in tokens.semantic.css / platforma-tokens.css. Version: 1.0.0 (Phase 1 — DS-1) Created: 2026-09-08 ──────────────────────────────────────────────────────────────────── */ :root { /* ───────────────────────────────────────────────────────────── MONO — near-ink "brand-neutral" emphasis fill/text. demo1's crispest trick: one neutral that stays crisp in BOTH themes. Light = a near-ink slate (slate-900); the dark override flips it to a near-paper slate (slate-100) below. Use for: KPI/stat numbers, primary table emphasis, a future .pf-btn-mono. NOT an action color — it never replaces the navy chrome-action family. MEASURED WCAG CONTRAST (light theme, sRGB, 2026-09-08): • mono-foreground on mono = #ffffff on slate-900 #0f172a → 17.9:1 (AAA) • mono on surface = slate-900 #0f172a on surface-raised #ffffff → 17.9:1 (AAA) = slate-900 #0f172a on surface-base #f8fafc → 17.1:1 (AAA) ───────────────────────────────────────────────────────────── */ --pf-color-mono: var(--pf-color-slate-900); --pf-color-mono-foreground: var(--pf-color-white); /* ───────────────────────────────────────────────────────────── DENSE TYPE — the two sizes Tailwind/most scales lack for admin tables, badges and meta (demo1 ships these as 2sm / 2xs). Additive to the primitive type scale; never re-declares it. ───────────────────────────────────────────────────────────── */ --pf-text-2sm: .8125rem; /* 13px — table cells, dense labels */ --pf-text-2xs: .6875rem; /* 11px — badges, meta, overlines */ /* ───────────────────────────────────────────────────────────── DENSITY BAND — comfortable is the DEFAULT (declared here on :root). [data-pf-density] on swaps the band. demo1 ships a single density; this is a beat-it axis (power-user property admins get compact, board members get comfortable/spacious). Values ride the existing 0.25rem spacing rhythm; card padding references the --pf-space-* scale so it theme/scale-tracks. Comfortable row/control heights are ≥44px (WCAG touch target). ───────────────────────────────────────────────────────────── */ --pf-row-height: 2.75rem; /* 44px — table/list row */ --pf-control-height: 2.5rem; /* 40px — inputs/buttons */ --pf-card-pad: var(--pf-space-5); /* 20px — card body padding */ /* ───────────────────────────────────────────────────────────── COLOR-MIX STATE HELPERS — the LONG TAIL only. demo1 derives hover/active with color-mix() instead of a second guessed hex. The action family (primary/subtle/danger) already has HAND-PICKED navy hovers in tokens.semantic.css — those are deliberately NOT touched here. These helpers cover the tokens that have NO hand-picked hover yet (the status family + mono): a perceptual ~10% darken in oklab. ───────────────────────────────────────────────────────────── */ --pf-color-mono-hover: color-mix(in oklab, var(--pf-color-mono) 90%, black); --pf-color-status-success-hover: color-mix(in oklab, var(--pf-color-status-success) 90%, black); --pf-color-status-warning-hover: color-mix(in oklab, var(--pf-color-status-warning) 90%, black); --pf-color-status-danger-hover: color-mix(in oklab, var(--pf-color-status-danger) 90%, black); --pf-color-status-info-hover: color-mix(in oklab, var(--pf-color-status-info) 90%, black); /* ───────────────────────────────────────────────────────────── CHROME RAIL (PL-3, 2026-09-08) — the navigation rail is DARK in BOTH themes. Before PL-3 the sidebar painted itself with the legacy --platforma-gray-900 / --platforma-white aliases, which the compat shim maps to text-primary / surface-raised — i.e. the rail would have INVERTED to near-white under [data-pf-theme=dark]. These roles name the rail explicitly so it stays a dark surface: light = slate-900 (today's rendered value, pixel-identical), dark = slate-950 (one step BELOW the slate-900 page, so the three chrome surfaces read header > page > rail). MEASURED WCAG CONTRAST (sRGB, 2026-09-08): • rail-text white on slate-900 17.85:1 · on slate-950 20.17:1 (AAA) • rail-muted slate-300 on slate-950 13.59:1 (AAA) • rail-subtle slate-500 on slate-950 4.24:1 (AA-large — 10–12px uppercase section labels are non-essential; the nav item text itself is white) • active accent (chrome-action-on-dark #6E9CC9) on slate-950 6.98:1 (AA) ───────────────────────────────────────────────────────────── */ --pf-color-chrome-rail: var(--pf-color-slate-900); --pf-color-chrome-rail-text: var(--pf-color-white); --pf-color-chrome-rail-muted: var(--pf-color-slate-300); --pf-color-chrome-rail-subtle: var(--pf-color-slate-500); /* ───────────────────────────────────────────────────────────── CONTROL BORDER (PL-3) — the boundary of form controls must meet WCAG 1.4.11 (≥ 3:1). border-strong (slate-300 on white 1.5:1 — inputs also carry a sunken fill, so light mode reads the boundary from the fill step) keeps its light value; in dark, slate-600 on the slate-950 input fill measures only 2.66:1, so the dark override below steps the control border up to slate-500 (4.24:1 on slate-950 · 3.07:1 on slate-800). ───────────────────────────────────────────────────────────── */ --pf-color-border-control: var(--pf-color-border-strong); /* ───────────────────────────────────────────────────────────── WARM SURFACE (PL-3) — the Parchment/Ink page-header tint. The admin page header, its progress ring and the ⌘K palette were painting two hardcoded creams; those exact values become the light role here (pixel-identical), and dark maps the pair onto the raised→base elevation step so the tint never floats as a cream island on a dark page. Raw hex is deliberate in this token file (the editions layer does the same for navy): the creams are Platforma's own Parchment values, not a palette step. ───────────────────────────────────────────────────────────── */ --pf-color-surface-warm: #FFFCF4; --pf-color-surface-warm-deep: #FAF6EE; /* ───────────────────────────────────────────────────────────── CHROME HERO (PL-3 / DL-01) — the platform page-banner gradient (PageBanner "platform" + every .platforma-welcome-section). It is an ALWAYS-DARK chrome surface like the rail: navy in BOTH themes, white title in both. Before this role the banner was composed from two TEXT-role aliases (--platforma-ink-primary / --platforma-accent-ink) that inverted to a light gradient under dark while the title stayed literal white (white-on-light). These are the today-rendered light values (pixel-identical); dark deepens one step. Raw hex is deliberate here, same as the warm creams and the editions navy. ───────────────────────────────────────────────────────────── */ --pf-color-chrome-hero-start: #1A1D2B; --pf-color-chrome-hero-end: #1B3D5E; } /* ───────────────────────────────────────────────────────────── DENSITY — COMPACT (power-user tables / operator surfaces) ───────────────────────────────────────────────────────────── */ [data-pf-density="compact"] { --pf-row-height: 2.25rem; /* 36px */ --pf-control-height: 2rem; /* 32px */ --pf-card-pad: var(--pf-space-3); /* 12px */ } /* ───────────────────────────────────────────────────────────── DENSITY — COMFORTABLE (default; declared explicitly so an ancestor-scoped comfortable band re-asserts the default) ───────────────────────────────────────────────────────────── */ [data-pf-density="comfortable"] { --pf-row-height: 2.75rem; /* 44px */ --pf-control-height: 2.5rem; /* 40px */ --pf-card-pad: var(--pf-space-5); /* 20px */ } /* ───────────────────────────────────────────────────────────── DENSITY — SPACIOUS (board-member / resident portal comfort) ───────────────────────────────────────────────────────────── */ [data-pf-density="spacious"] { --pf-row-height: 3.25rem; /* 52px */ --pf-control-height: 2.75rem; /* 44px */ --pf-card-pad: var(--pf-space-6); /* 24px */ } /* ───────────────────────────────────────────────────────────── MONO — dark theme override (parallel to themes.dark.css; declared here because mono is a DS-1 token that themes.dark.css does not know about). Near-paper slate on dark surfaces. MEASURED WCAG CONTRAST (dark theme, sRGB, 2026-09-08): • mono-foreground on mono = slate-900 #0f172a on slate-100 #f1f5f9 → 16.3:1 (AAA) • mono on surface = slate-100 #f1f5f9 on surface-raised #1e293b (slate-800) → 13.4:1 (AAA) ───────────────────────────────────────────────────────────── */ [data-pf-theme="dark"], [data-cms-editor-theme="dark"] { --pf-color-mono: var(--pf-color-slate-100); --pf-color-mono-foreground: var(--pf-color-slate-900); /* PL-3 — the rail sinks one step below the dark page; text roles hold. */ --pf-color-chrome-rail: var(--pf-color-slate-950); --pf-color-chrome-rail-text: var(--pf-color-white); --pf-color-chrome-rail-muted: var(--pf-color-slate-300); --pf-color-chrome-rail-subtle: var(--pf-color-slate-500); --pf-color-border-control: var(--pf-color-slate-500); --pf-color-surface-warm: var(--pf-color-slate-800); --pf-color-surface-warm-deep: var(--pf-color-slate-900); /* DL-01 — hero stays dark; deepen one step so the white title reads ≥15:1 */ --pf-color-chrome-hero-start: var(--pf-color-slate-950); --pf-color-chrome-hero-end: #14283F; } /* Auto dark mode parity — mirror themes.dark.css's exclusion pattern so mono follows the OS preference unless the user opted into light. */ @media (prefers-color-scheme: dark) { :root:not([data-pf-theme="light"]):not([data-cms-editor-theme="light"]) { --pf-color-mono: var(--pf-color-slate-100); --pf-color-mono-foreground: var(--pf-color-slate-900); --pf-color-chrome-rail: var(--pf-color-slate-950); --pf-color-chrome-rail-text: var(--pf-color-white); --pf-color-chrome-rail-muted: var(--pf-color-slate-300); --pf-color-chrome-rail-subtle: var(--pf-color-slate-500); --pf-color-border-control: var(--pf-color-slate-500); --pf-color-surface-warm: var(--pf-color-slate-800); --pf-color-surface-warm-deep: var(--pf-color-slate-900); --pf-color-chrome-hero-start: var(--pf-color-slate-950); --pf-color-chrome-hero-end: #14283F; } } /* ==== css/pf/themes.editions.css ==== */ /* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Edition Themes (DS-2) ──────────────────────────────────────────────────────────────────── Named, documented edition layers that re-map the PF action family (+ the --platforma-chrome-action alias family) to a specific edition's WCAG-measured accent. An "edition" is a product vertical (housing, ecommerce, consultancy…) — the sibling-file model so a future edition drops in as a new selector, never a fork. Loaded immediately AFTER tokens.semantic.css (see _PfDesignSystem.cshtml). RELATIONSHIP TO THE EXISTING ADMIN REMAP — PARALLEL & ADDITIVE. ───────────────────────────────────────────────────────────────────── The logged-in chrome ALREADY runs on the navy accent via the body[data-area="site"/"admin"] remap in tokens.semantic.css and the :where(body[data-area=...]) remap in platforma-buttons.css — pinned by SiteChromeNavyActionLp11Tests / SiteChromeNavyNavLp12Tests / CmsIndexParchmentLp13Tests / Fase6_AdminChromeTests. THOSE RULES ARE NOT TOUCHED. This file adds a NEW, independent selector ([data-pf-edition="housing"]) that expresses the SAME navy, so the edition concept has a home of its own without disturbing the shipped admin chrome. Nothing sets data-pf-edition today → this file is inert (no visual change) until a layout opts a surface in. CANON: red stays quarantined to marketing / destructive / brand-mark. No edition layer here maps an action token to brand red. WCAG (measured 2026-08-31, carried from platforma-tokens.css): housing navy — white-on-accent 6.97:1 (AA) · white-on-hover 11.20:1 (AAA) · accent-on-parchment 6.28:1 (AA) · accent-ink-on-soft 9.59:1 (AAA) · on-dark #6E9CC9 5.80:1 on gray-900 (AA text + non-text). Version: 1.0.0 (Phase 1 — DS-2) Created: 2026-09-08 ──────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────── EDITION — HOUSING (navy). The reference edition. Re-maps the PF action family + the chrome-action aliases to the navy values, exactly mirroring the body[data-area="admin"] remap in tokens.semantic.css — promoted here into a named edition selector. ───────────────────────────────────────────────────────────────────── */ [data-pf-edition="housing"] { /* Chrome-action alias family — the same navy platforma-tokens.css binds to the accent family and the admin chrome expresses today. */ --platforma-chrome-action: #2E5C8A; /* accent */ --platforma-chrome-action-hover: #1B3D5E; /* ink */ --platforma-chrome-action-soft: #E8EEF5; /* soft */ --platforma-chrome-action-on-dark: #6E9CC9; /* on-dark */ /* PF semantic action family, bound through the alias (raw navy hex is only the var() fallback literal) — byte-parallel to the shipped body[data-area="admin"] remap so behaviour is identical. */ --pf-color-action-primary: var(--platforma-chrome-action, #2E5C8A); --pf-color-action-primary-hover: var(--platforma-chrome-action-hover, #1B3D5E); --pf-color-action-primary-pressed: color-mix(in srgb, var(--platforma-chrome-action-hover, #1B3D5E) 85%, #000); --pf-color-action-primary-soft: var(--platforma-chrome-action-soft, #E8EEF5); --pf-color-action-primary-soft-hover: color-mix(in srgb, var(--platforma-chrome-action-soft, #E8EEF5) 88%, var(--platforma-chrome-action, #2E5C8A)); } /* ───────────────────────────────────────────────────────────────────── EDITION — ECOMMERCE. Documented placeholder (Phase 2 candidate). No values yet: the accent, ink, soft and on-dark navy-equivalents for the ecommerce vertical are TBD and will be added, WCAG-measured, when that edition is designed. Deliberately empty so grep/verify can prove the slot exists without shipping an unmeasured colour. ───────────────────────────────────────────────────────────────────── */ [data-pf-edition="ecommerce"] { /* placeholder — no action re-map yet (values TBD, must be WCAG-measured) */ } /* ───────────────────────────────────────────────────────────────────── EDITION — CONSULTANCY. Documented placeholder (Phase 2 candidate). Same contract as ecommerce above: values TBD + WCAG-measured on add. ───────────────────────────────────────────────────────────────────── */ [data-pf-edition="consultancy"] { /* placeholder — no action re-map yet (values TBD, must be WCAG-measured) */ } /* ==== css/pf/themes.dark.css ==== */ /* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Dark Theme ──────────────────────────────────────────────────────────────────── Themes are PURE TOKEN OVERRIDES. This file: ✓ Re-declares semantic color tokens with dark-mode primitives ✓ Adjusts shadow tokens for dark surface contrast ✗ NEVER targets components (no .pf-card, .pf-button, etc.) ✗ NEVER adds new tokens (only overrides existing ones) ✗ NEVER references primitives by hex value (use --pf-color-*-N) Selector: [data-pf-theme="dark"] applied to or . Backwards-compat: also targets [data-cms-editor-theme="dark"] which is the legacy attribute used by the CMS editor toggle. Design principles for dark themes (Material Design 3 + Apple HIG): • Surfaces use slate-900 → slate-700 (not pure black) to reduce eye strain and preserve perceptual depth. • Elevated surfaces are LIGHTER than base (inverse of light theme) — overlays/modals must rise above ambient. • Text contrast uses slate-50 (not white) to soften harsh edges. • Action colors shift LIGHTER (indigo-500 → indigo-400) for better contrast on dark backgrounds while keeping brand identity. • Status colors shift LIGHTER for the same reason; soft variants become DARKER (deeper saturation) to avoid washed-out tints. Version: 1.0.0 Last revised: 2026-05-09 ──────────────────────────────────────────────────────────────────── */ [data-pf-theme="dark"], [data-cms-editor-theme="dark"] { /* ───────────────────────────────────────────────────────────── SURFACE — Inverted elevation (lighter as we go up) ───────────────────────────────────────────────────────────── */ --pf-color-surface-base: var(--pf-color-slate-900); --pf-color-surface-raised: var(--pf-color-slate-800); --pf-color-surface-overlay: var(--pf-color-slate-700); --pf-color-surface-sunken: var(--pf-color-slate-950); --pf-color-surface-hover: var(--pf-color-slate-700); --pf-color-surface-selected: var(--pf-color-indigo-950); --pf-color-surface-disabled: var(--pf-color-slate-800); /* ───────────────────────────────────────────────────────────── TEXT — Light values on dark surfaces, WCAG AA verified ───────────────────────────────────────────────────────────── */ --pf-color-text-primary: var(--pf-color-slate-50); --pf-color-text-secondary: var(--pf-color-slate-300); --pf-color-text-tertiary: var(--pf-color-slate-400); --pf-color-text-disabled: var(--pf-color-slate-600); --pf-color-text-on-action: var(--pf-color-white); /* A11Y-TOAST-1 (2026-09-15) — the status fills FLIP with the theme; this did not. Light theme uses the 500/600 tints (dark), so a white glyph is right. Dark theme uses the 400 tints (light), and a white glyph on them measured 1.67-2.77:1 — emerald 1.92, amber 1.67, sky 2.14, red 2.77, every one below the 3:1 that WCAG 1.4.11 requires of a meaningful glyph. slate-950 on the same fills measures 7.29-12.08:1. */ --pf-color-text-on-status: var(--pf-color-slate-950); --pf-color-text-on-status-warning: var(--pf-color-slate-950); --pf-color-text-inverse: var(--pf-color-slate-900); /* ───────────────────────────────────────────────────────────── BORDER — Subtle dividers stay subtle on dark ───────────────────────────────────────────────────────────── */ --pf-color-border-subtle: var(--pf-color-slate-700); --pf-color-border-strong: var(--pf-color-slate-600); --pf-color-border-focus: var(--pf-color-indigo-400); --pf-color-border-inverse: var(--pf-color-slate-300); /* ───────────────────────────────────────────────────────────── ACTION — Indigo retains depth in dark mode for white-text contrast. Note: indigo-500 (#6366f1) on white = 4.47:1 (FAILS WCAG AA at 4.5). We keep indigo-600 in dark mode to preserve 6.6:1 contrast for text-on-action. Darker primary stands out fine on slate-800 button-surface; visibility was never the constraint — readability of the button label was. Verified by Phase B arch-test PhaseB_PrimaryButton_WcagAaContrast. ───────────────────────────────────────────────────────────── */ /* HF 2026-05-11: aligned to Platforma brand red palette (same reasoning as tokens.semantic.css). platforma-500 (#d4213d) on slate-800 button-surface gives 4.6:1 ✓ for white text. */ --pf-color-action-primary: var(--pf-color-platforma-500); --pf-color-action-primary-hover: var(--pf-color-platforma-400); --pf-color-action-primary-pressed: var(--pf-color-platforma-600); --pf-color-action-primary-soft: var(--pf-color-platforma-950); --pf-color-action-primary-soft-hover: var(--pf-color-platforma-900); --pf-color-action-subtle: var(--pf-color-slate-700); --pf-color-action-subtle-hover: var(--pf-color-slate-600); /* Same WCAG argument: red-500 (#ef4444) on white = 3.76:1 fails AA; red-600 (#dc2626) gives 4.83:1 ✓ */ --pf-color-action-danger: var(--pf-color-red-600); --pf-color-action-danger-hover: var(--pf-color-red-500); --pf-color-action-danger-soft: var(--pf-color-red-950); --pf-color-action-success: var(--pf-color-emerald-700); /* ───────────────────────────────────────────────────────────── STATUS — Solid: lighter for visibility. Soft: darker for saturation depth. Foreground: lighter for readable status text. ───────────────────────────────────────────────────────────── */ /* Success */ --pf-color-status-success: var(--pf-color-emerald-400); --pf-color-status-success-soft: var(--pf-color-emerald-950); --pf-color-status-success-border: var(--pf-color-emerald-700); --pf-color-status-success-fg: var(--pf-color-emerald-300); /* Warning */ --pf-color-status-warning: var(--pf-color-amber-400); --pf-color-status-warning-soft: var(--pf-color-amber-950); --pf-color-status-warning-border: var(--pf-color-amber-700); --pf-color-status-warning-fg: var(--pf-color-amber-300); /* Danger */ --pf-color-status-danger: var(--pf-color-red-400); --pf-color-status-danger-soft: var(--pf-color-red-950); --pf-color-status-danger-border: var(--pf-color-red-700); --pf-color-status-danger-fg: var(--pf-color-red-300); /* Info */ --pf-color-status-info: var(--pf-color-sky-400); --pf-color-status-info-soft: var(--pf-color-sky-950); --pf-color-status-info-border: var(--pf-color-sky-700); --pf-color-status-info-fg: var(--pf-color-sky-300); /* ───────────────────────────────────────────────────────────── SHADOW — Stronger blur radius + lower alpha for dark glow. Pure shadow looks invisible on dark; we tune contrast by increasing blur and using black at higher opacity. ───────────────────────────────────────────────────────────── */ --pf-color-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40); --pf-color-shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.40); --pf-color-shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.50), 0 4px 8px -4px rgb(0 0 0 / 0.40); --pf-color-shadow-xl: 0 20px 30px -5px rgb(0 0 0 / 0.55), 0 8px 12px -6px rgb(0 0 0 / 0.45); --pf-color-shadow-2xl: 0 25px 60px -12px rgb(0 0 0 / 0.65); /* ───────────────────────────────────────────────────────────── FOCUS RING — Re-derive for dark surfaces (offset against the dark surface, not white) ───────────────────────────────────────────────────────────── */ --pf-focus-ring: 0 0 0 2px var(--pf-color-surface-raised), 0 0 0 4px var(--pf-color-border-focus); } /* ════════════════════════════════════════════════════════════════════ SYSTEM MODE — PL-3 (2026-09-08, ADMIN-DESIGN-SYSTEM-PLAN §B6) ──────────────────────────────────────────────────────────────────── is the explicit "follow the OS" choice the admin theme control persists (Platforma.Theme cookie, stamped by _Layout at render — FOUC-safe, no pre-paint script). Under an OS dark preference it must equal the explicit dark theme EXACTLY, so this block re-declares the COMPLETE set above (the auto block further down is a surface/text/border subset that predates PL-3 and is left untouched for the pages that carry no attribute). Parity between the two full blocks is pinned by Pl3AdminDarkModeTests — edit both together. ──────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { html[data-pf-theme="system"] { --pf-color-surface-base: var(--pf-color-slate-900); --pf-color-surface-raised: var(--pf-color-slate-800); --pf-color-surface-overlay: var(--pf-color-slate-700); --pf-color-surface-sunken: var(--pf-color-slate-950); --pf-color-surface-hover: var(--pf-color-slate-700); --pf-color-surface-selected: var(--pf-color-indigo-950); --pf-color-surface-disabled: var(--pf-color-slate-800); --pf-color-text-primary: var(--pf-color-slate-50); --pf-color-text-secondary: var(--pf-color-slate-300); --pf-color-text-tertiary: var(--pf-color-slate-400); --pf-color-text-disabled: var(--pf-color-slate-600); --pf-color-text-on-action: var(--pf-color-white); /* A11Y-TOAST-1 (2026-09-15) — the status fills FLIP with the theme; this did not. Light theme uses the 500/600 tints (dark), so a white glyph is right. Dark theme uses the 400 tints (light), and a white glyph on them measured 1.67-2.77:1 — emerald 1.92, amber 1.67, sky 2.14, red 2.77, every one below the 3:1 that WCAG 1.4.11 requires of a meaningful glyph. slate-950 on the same fills measures 7.29-12.08:1. */ --pf-color-text-on-status: var(--pf-color-slate-950); --pf-color-text-on-status-warning: var(--pf-color-slate-950); --pf-color-text-inverse: var(--pf-color-slate-900); --pf-color-border-subtle: var(--pf-color-slate-700); --pf-color-border-strong: var(--pf-color-slate-600); --pf-color-border-focus: var(--pf-color-indigo-400); --pf-color-border-inverse: var(--pf-color-slate-300); --pf-color-action-primary: var(--pf-color-platforma-500); --pf-color-action-primary-hover: var(--pf-color-platforma-400); --pf-color-action-primary-pressed: var(--pf-color-platforma-600); --pf-color-action-primary-soft: var(--pf-color-platforma-950); --pf-color-action-primary-soft-hover: var(--pf-color-platforma-900); --pf-color-action-subtle: var(--pf-color-slate-700); --pf-color-action-subtle-hover: var(--pf-color-slate-600); --pf-color-action-danger: var(--pf-color-red-600); --pf-color-action-danger-hover: var(--pf-color-red-500); --pf-color-action-danger-soft: var(--pf-color-red-950); --pf-color-action-success: var(--pf-color-emerald-700); --pf-color-status-success: var(--pf-color-emerald-400); --pf-color-status-success-soft: var(--pf-color-emerald-950); --pf-color-status-success-border: var(--pf-color-emerald-700); --pf-color-status-success-fg: var(--pf-color-emerald-300); --pf-color-status-warning: var(--pf-color-amber-400); --pf-color-status-warning-soft: var(--pf-color-amber-950); --pf-color-status-warning-border: var(--pf-color-amber-700); --pf-color-status-warning-fg: var(--pf-color-amber-300); --pf-color-status-danger: var(--pf-color-red-400); --pf-color-status-danger-soft: var(--pf-color-red-950); --pf-color-status-danger-border: var(--pf-color-red-700); --pf-color-status-danger-fg: var(--pf-color-red-300); --pf-color-status-info: var(--pf-color-sky-400); --pf-color-status-info-soft: var(--pf-color-sky-950); --pf-color-status-info-border: var(--pf-color-sky-700); --pf-color-status-info-fg: var(--pf-color-sky-300); --pf-color-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40); --pf-color-shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.40); --pf-color-shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.50), 0 4px 8px -4px rgb(0 0 0 / 0.40); --pf-color-shadow-xl: 0 20px 30px -5px rgb(0 0 0 / 0.55), 0 8px 12px -6px rgb(0 0 0 / 0.45); --pf-color-shadow-2xl: 0 25px 60px -12px rgb(0 0 0 / 0.65); --pf-focus-ring: 0 0 0 2px var(--pf-color-surface-raised), 0 0 0 4px var(--pf-color-border-focus); } } /* ════════════════════════════════════════════════════════════════════ AUTO DARK MODE — Respect prefers-color-scheme ──────────────────────────────────────────────────────────────────── Apply dark token-overrides automatically when the OS reports a dark color preference, UNLESS the user has explicitly chosen light via data-pf-theme="light" (which wins via attribute selector specificity). ──────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-pf-theme="light"]):not([data-cms-editor-theme="light"]) { --pf-color-surface-base: var(--pf-color-slate-900); --pf-color-surface-raised: var(--pf-color-slate-800); --pf-color-surface-overlay: var(--pf-color-slate-700); --pf-color-surface-sunken: var(--pf-color-slate-950); --pf-color-surface-hover: var(--pf-color-slate-700); --pf-color-surface-selected: var(--pf-color-indigo-950); --pf-color-surface-disabled: var(--pf-color-slate-800); --pf-color-text-primary: var(--pf-color-slate-50); --pf-color-text-secondary: var(--pf-color-slate-300); --pf-color-text-tertiary: var(--pf-color-slate-400); --pf-color-text-disabled: var(--pf-color-slate-600); --pf-color-border-subtle: var(--pf-color-slate-700); --pf-color-border-strong: var(--pf-color-slate-600); --pf-color-border-focus: var(--pf-color-indigo-400); } }