/* ========================================= PLATFORMA TOKENS (Farver, spacing, type) ========================================= */ :root { /* Professional Color System HF 2026-05-11: realigned legacy --platforma-primary family from the original blue (#009EF7) to the Platforma brand red. Marketing, admin chrome, and editor now all resolve to the same primary action color. Tenant-scoped admin still overrides this via the --tenant-primary layer in platforma-admin-themed.css (Malmöhus11's red, Nordic Sand's bronze, etc.) so multi-tenant branding is preserved. Matches --pf-color-action-primary defined in pf/tokens.semantic.css for cross-stack consistency. */ --platforma-primary: #D4213D; --platforma-primary-light: #FDF1F3; --platforma-primary-dark: #B91C36; --platforma-success: #50CD89; --platforma-success-light: #E8FFF3; --platforma-warning: #FFC700; --platforma-warning-light: #FFF8DD; --platforma-danger: #F1416C; --platforma-danger-light: #FFF5F8; --platforma-info: #7239EA; --platforma-info-light: #F8F5FF; /* Enterprise Grayscale */ --platforma-white: #FFFFFF; --platforma-gray-50: #F5F8FA; --platforma-gray-100: #EFF2F5; --platforma-gray-200: #E4E6EF; --platforma-gray-300: #B5B5C3; --platforma-gray-400: #A1A5B7; --platforma-gray-500: #7E8299; --platforma-gray-600: #5E6278; --platforma-gray-700: #3F4254; --platforma-gray-800: #2B2B40; --platforma-gray-900: #181C32; /* Shadows */ --platforma-shadow-sm: 0 1px 3px rgba(0,0,0,0.05); --platforma-shadow-md: 0 2px 8px rgba(0,0,0,0.08); --platforma-shadow: 0 4px 18px rgba(0,0,0,0.07); --platforma-shadow-lg: 0 8px 25px rgba(0,0,0,0.1); --platforma-shadow-xl: 0 15px 40px rgba(0,0,0,0.15); /* Spacing (4px scale) */ --platforma-space-1: 0.25rem; /* 4px */ --platforma-space-2: 0.5rem; /* 8px */ --platforma-space-3: 0.75rem; /* 12px */ --platforma-space-4: 1rem; /* 16px */ --platforma-space-5: 1.25rem; /* 20px */ --platforma-space-6: 1.5rem; /* 24px */ --platforma-space-8: 2rem; /* 32px */ --platforma-space-10: 2.5rem; /* 40px */ /* Typography */ --platforma-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --platforma-text-xs: 0.75rem; --platforma-text-sm: 0.875rem; --platforma-text-base: 1rem; --platforma-text-lg: 1.125rem; --platforma-text-xl: 1.25rem; --platforma-text-2xl: 1.5rem; --platforma-text-3xl: 1.875rem; /* Radius */ --platforma-radius-sm: 6px; --platforma-radius: 8px; --platforma-radius-md: 10px; --platforma-radius-lg: 12px; --platforma-radius-xl: 16px; /* Transitions */ --platforma-transition: 0.15s ease; --platforma-transition-slow: 0.25s ease; /* Border */ --platforma-border: #E4E6EF; } /* ========================================= PLATFORMA TOKENS — v2 parchment/ink extension ----------------------------------------- Additive layer. Alle eksisterende tokens ovenfor forbliver uændrede så hver nuværende .platforma-* klasse fortsat virker. Nye premium- komponenter (editor, workbench, upcoming shells) skal binde til disse tokens i stedet for de kølige Ketto-blå/grå originaler. ========================================= */ :root { /* ── Parchment surface-palette (warm neutrals, scandinavian paper) ── */ --platforma-parchment-50: #FBFAF6; /* page-bg default */ --platforma-parchment-100: #F6F3EB; /* subtle card tint */ --platforma-parchment-200: #EDE7D7; /* card/panel border */ --platforma-parchment-300: #D9D2BE; /* divider strong */ /* ── Ink text-hierarki (deep ink — til tekst i stedet for gray-*) ── */ --platforma-ink-primary: #1A1D2B; /* body default */ --platforma-ink-strong: #0B0D16; /* headings */ --platforma-ink-muted: #5E6275; /* secondary tekst */ --platforma-ink-subtle: #8B8E9E; /* tertiary / hints */ /* ── Restrained accents (deep scandinavian blue, reserveret til CTAs) ── */ --platforma-accent: #2E5C8A; --platforma-accent-soft: #E8EEF5; --platforma-accent-ink: #1B3D5E; /* ── Soft shadows (warmer, ink-based, mindre clinical) ── */ --platforma-shadow-soft: 0 1px 2px rgba(26, 29, 43, 0.04), 0 1px 3px rgba(26, 29, 43, 0.06); --platforma-shadow-card: 0 2px 6px rgba(26, 29, 43, 0.05), 0 4px 16px rgba(26, 29, 43, 0.06); --platforma-shadow-float: 0 8px 24px rgba(26, 29, 43, 0.10), 0 2px 6px rgba(26, 29, 43, 0.06); /* ── Radius: ekstra tight tier til chips/pills ── */ --platforma-radius-xs: 4px; /* ── Editorial typografi (føjes til; --platforma-font-family bevares) ── */ --platforma-font-sans: var(--platforma-font-family); --platforma-font-serif: 'Source Serif Pro', 'Iowan Old Style', Georgia, serif; --platforma-font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, monospace; /* ── Fokusring (a11y, deep-accent tint) ── */ --platforma-focus-ring: 0 0 0 3px rgba(46, 92, 138, 0.28); /* ── Transitions ── */ --platforma-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --platforma-duration-fast: 120ms; --platforma-duration: 180ms; /* ── Semantiske surface-aliasser (brug disse i nye komponenter) ── */ --platforma-surface-page: var(--platforma-parchment-50); --platforma-surface-card: var(--platforma-white); --platforma-surface-sunk: var(--platforma-parchment-100); --platforma-surface-line: var(--platforma-parchment-200); } /* ========================================= PLATFORMA TOKENS — v3 editor consolidation (Fase 4a) ----------------------------------------- Konsoliderer editor-specifikke tokens der tidligere levede i platforma-design-tokens.css så hele systemet (admin, editor, portal) kan loade ÉN tokens-fil. Strategi: - :root-niveau: tilføj alle editor-specifikke tokens (soft-variants, radii, accent-border, s-* spacing-aliasser, jetbrains mono-update) som er additive og ikke forstyrrer eksisterende admin-farver. - .se-app { ... }: scoped override kun inden for editor-shell så editorens muted scandinavian success/warning/danger bevares — admin + CRM + workbench fortsætter med v1 bright-paletten uændret. Resultat: én fil, to visuelle kontekster, ingen drift. ========================================= */ :root { /* ── Editor-specifikke accent-varianter ───────────────────────── */ --platforma-accent-border: #C4D3E3; /* ── Muted soft-variants (editor/premium surfaces) ────────────── */ --platforma-success-soft: #E8F0EB; --platforma-warning-soft: #FAF1DC; --platforma-danger-soft: #F5E4E8; /* ── Radius-aliasser (editor bruger disse navne) ──────────────── */ --platforma-radius-input: 8px; /* = --platforma-radius */ --platforma-radius-card: var(--platforma-radius-lg); /* 12px */ --platforma-radius-panel: var(--platforma-radius-xl); /* 16px */ --platforma-radius-pill: 999px; /* ── Monospace: prioriter JetBrains Mono (editor-preferred) ──── */ --platforma-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace; /* ── Shadow-float (match design-tokens værdi — mere pronounced for editor drawers/popovers) ──────────────────────────── */ --platforma-shadow-float: 0 10px 28px rgba(26, 29, 43, 0.12), 0 2px 6px rgba(26, 29, 43, 0.06); /* ── Spacing-aliasser (--s-* er editor-konvention; peger på de eksisterende --space-*-tokens så 4px-skalaen er én kilde) ─ */ --platforma-s-1: var(--platforma-space-1); /* 4px */ --platforma-s-2: var(--platforma-space-2); /* 8px */ --platforma-s-3: var(--platforma-space-3); /* 12px */ --platforma-s-4: var(--platforma-space-4); /* 16px */ --platforma-s-5: var(--platforma-space-5); /* 20px */ --platforma-s-6: var(--platforma-space-6); /* 24px */ --platforma-s-7: 1.75rem; /* 28px (not in v1 scale) */ --platforma-s-8: var(--platforma-space-8); /* 32px */ } /* ── Editor-scope override: inden for .se-app bruger vi muted scandinavian semantic-farver. Admin/workbench/CRM beholder bright v1-paletten fordi --platforma-success/-warning/-danger kun er overridet herinde. site-editor.css refererer disse tokens uden at vide om scoping — det er hele pointen. Samme CSS, to visuelle kontekster. */ .se-app, .se-body { --platforma-success: #3F7D54; /* muted scandinavian green */ --platforma-warning: #B88320; /* ochre */ --platforma-danger: #B13F55; /* muted rose */ } /* ========================================= PLATFORMA TOKENS — v4 brand premium-pass (S5.1b — 2026-04-26) ----------------------------------------- Lever ÉT brand-system som premium-flader (Custom Domain cockpit, future subscription/onboarding hero-moments) konsumerer uden at admin-chrome eller eksisterende v1/v2/v3-flader bliver påvirket. Designvalg per V6.3-roller (dokumenteret in-line så fremtidige editører ved hvorfor tokens hedder hvad de hedder): * Senior Brand / Visual Identity Director: --platforma-brand er Platforma red #D4213D — doseret iht. V6.3 § "intentionally rather than everywhere": kun primary CTA + brand-mark + Active-state celebration accent. Aldrig på borders/dividers/secondary. * Senior WCAG Accessibility Engineer: --platforma-brand på matte dark giver kun 3.26:1 — fejler AA for tekst. Derfor splittet i to tokens: -brand er fyld-farven (white text på rød er 5.14:1 ✓ AA), -brand-on-dark er lightened #F4516C (4.97:1 ✓ AA på #1A1D2B). Brug -brand til knap-baggrunde, -brand-on-dark til ALL tekst på dark surfaces. * Senior Design Token / Color Systems Engineer: Rent additivt — ingen overrides af v1/v2/v3. Nye tokens har -brand- og -dark-chrome-prefixes så semantikken er entydig. * Senior UX Systems Architect: Motion-tokens definerer easing + duration som globale variabler så micro-interactions (auto-poll, state-transitions, celebration) deler timing-language. prefers-reduced-motion respekteres altid. ========================================= */ :root { /* ── Brand palette (Platforma red, doseret) ──────────────────── */ --platforma-brand: #D4213D; /* fill, brand-mark, primary CTA */ --platforma-brand-on-dark: #F4516C; /* WCAG AA tekst på dark surfaces */ --platforma-brand-pressed: #B81830; /* button:active state */ --platforma-brand-soft: #FBE7EA; /* tint surface (light bg) */ --platforma-brand-glow: rgba(212, 33, 61, 0.22); /* hover-ring + focus */ /* ── Matte dark chrome (premium hero-zones, brand-moments) ─── */ --platforma-dark-chrome: #1A1D2B; /* base — V6.3 § "matte dark" */ --platforma-dark-chrome-2: #232737; /* elevated card on chrome */ --platforma-dark-chrome-3: #2D3144; /* hover/active surface */ --platforma-dark-line: #383C50; /* dividers on dark */ --platforma-dark-line-soft: rgba(255, 255, 255, 0.06); /* subtle separator */ /* ── Text on dark chrome (text-hierarki som WCAG AA-paritet) ─ */ --platforma-text-on-dark: #F7F8FB; /* primary — 15.76:1 */ --platforma-text-on-dark-muted: #A1A5B7; /* secondary — 6.84:1 */ --platforma-text-on-dark-subtle: #6B6F82; /* tertiary — 3.51:1 (UI only) */ /* ── Premium gradient surfaces (hero-zones, celebration) ──── */ --platforma-gradient-hero-dark: linear-gradient(135deg, #1A1D2B 0%, #232737 60%, #2D3144 100%); --platforma-gradient-celebration: radial-gradient(circle at top right, rgba(244, 81, 108, 0.18), transparent 70%), linear-gradient(135deg, #1A1D2B 0%, #232737 100%); --platforma-gradient-brand-stripe: linear-gradient(90deg, #D4213D 0%, #F4516C 100%); --platforma-gradient-pending: linear-gradient(135deg, #1A1D2B 0%, #1F2235 50%, #232737 100%); /* ── Soft glassmorphism overlay (subtle depth on hero) ────── */ --platforma-glass-light: rgba(255, 255, 255, 0.04); --platforma-glass-line: rgba(255, 255, 255, 0.08); /* ── Domain-cockpit status semantics (refines v1 stock colors) ─ */ --platforma-status-pending: #F4B942; /* warm amber, not stock yellow */ --platforma-status-pending-soft: #2A2618; --platforma-status-detected: #4ADE80; /* premium green tone */ --platforma-status-detected-soft: #15281C; --platforma-status-active: #34D399; /* mint celebration */ --platforma-status-active-glow: rgba(52, 211, 153, 0.28); --platforma-status-failed: #F87171; /* warmer than #EF4444 */ --platforma-status-failed-soft: #2C1A1C; /* ── Premium shadows (deeper, layered for hero-zones) ──────── */ --platforma-shadow-hero: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -16px rgba(0,0,0,0.45), 0 8px 16px -8px rgba(0,0,0,0.30); --platforma-shadow-celebration: 0 1px 0 rgba(255,255,255,0.08) inset, 0 32px 64px -20px rgba(212,33,61,0.20), 0 12px 24px -10px rgba(0,0,0,0.35); --platforma-shadow-glow-brand: 0 0 0 4px rgba(212, 33, 61, 0.15), 0 8px 24px -8px rgba(212, 33, 61, 0.30); /* ── Premium typography (hero-scale, tight-tracking) ──────── */ --platforma-text-hero: 2.25rem; /* 36px — hero-zone titles */ --platforma-text-display: 3rem; /* 48px — celebration moments */ --platforma-tracking-tight: -0.02em; --platforma-tracking-tighter:-0.03em; --platforma-leading-tight: 1.15; /* ── Motion (smooth, premium — not snappy) ────────────────── */ --platforma-ease-premium: cubic-bezier(0.32, 0.72, 0, 1); --platforma-ease-celebration:cubic-bezier(0.16, 1, 0.3, 1); /* overshoot-y */ --platforma-duration-quick: 120ms; --platforma-duration-smooth: 280ms; --platforma-duration-slow: 480ms; /* ── Noise texture for matte dark surfaces (data-URI SVG) ── */ --platforma-noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── prefers-reduced-motion respekt (Senior WCAG Engineer) ───── */ @media (prefers-reduced-motion: reduce) { :root { --platforma-duration-quick: 0ms; --platforma-duration-smooth: 0ms; --platforma-duration-slow: 0ms; } } /* ========================================= PLATFORMA TOKENS — v5 admin chrome consistency (FASE 5 — 2026-05-08) ----------------------------------------- Closes the FASE 5 "ingen ens design" finding from user screenshots: admin pages had 5 different hand-coded banner gradients (purple, pink, tan, red/purple, tan) with no token system. This layer introduces ONE gradient-system with 4 semantic variants + a type display scale + an explicit z-index stack so subsequent slices (DS.5 PageBanner, DS.2 type classes) bind to canonical tokens instead of inline-styles. Strategy: pure additions. Existing v1-v4 tokens are untouched. Pages migrate from hardcoded gradients to var(--platforma-page-banner-*) at their own pace (DS.5 + FASE 6 audit). ========================================= */ :root { /* ── Page-banner gradients (4 semantic variants) ────────────── Used by the ViewComponent (DS.5). Each variant signals the surface's role at a glance: platform — operator / SuperAdmin pages (Platforma brand red) tenant — tenant-context pages (matte dark chrome, like /admin/customer-success or per-tenant kontrolcenter) trust — trust + transparency surfaces (DPA, processors, GDPR governance) — calm deep accent blue warn — warnings, suspended states, approval-required pages — warm amber, non-alarming */ --platforma-page-banner-platform: linear-gradient(135deg, var(--platforma-brand) 0%, var(--platforma-brand-pressed) 100%); --platforma-page-banner-tenant: linear-gradient(135deg, var(--platforma-dark-chrome) 0%, var(--platforma-dark-chrome-3) 100%); --platforma-page-banner-trust: linear-gradient(135deg, var(--platforma-accent-ink) 0%, var(--platforma-accent) 100%); --platforma-page-banner-warn: linear-gradient(135deg, #B88320 0%, #D9A03B 100%); --platforma-page-banner-neutral: linear-gradient(135deg, var(--platforma-gray-700) 0%, var(--platforma-gray-800) 100%); /* ── Type display scale (clamp-baseret responsive) ──────────── The existing --platforma-text-* tokens cover body sizing; this layer defines the bigger display + headline + title scales used by .platforma-display, .platforma-headline, .platforma-title-* classes (DS.2). All sizes use clamp() so headlines on mobile don't dominate the 360px viewport while still scaling up to a 21" admin display. */ --platforma-text-display-1: clamp(2.25rem, 4vw, 3.5rem); /* 36-56px hero */ --platforma-text-display-2: clamp(1.875rem, 3.2vw, 2.75rem); /* 30-44px page-title */ --platforma-text-headline: clamp(1.5rem, 2.4vw, 2rem); /* 24-32px section */ --platforma-text-title-lg: clamp(1.25rem, 1.8vw, 1.5rem); /* 20-24px subsection */ --platforma-text-title: 1.125rem; /* 18px card-title */ --platforma-text-overline: 0.6875rem; /* 11px UPPERCASE label */ --platforma-leading-display: 1.08; --platforma-leading-heading: 1.2; --platforma-leading-body: 1.55; /* ── Z-index stack (no more 9999 / 10000 races) ────────────── Pin the layering order so dropdowns don't appear behind toasts, toasts don't bury modals, and modals don't get covered by sticky table headers. Numeric jumps so future inserts don't conflict. */ --platforma-z-base: 0; --platforma-z-sticky: 100; /* sticky table headers */ --platforma-z-dropdown: 300; /* select menus, autocomplete */ --platforma-z-overlay: 500; /* page-modal backdrop */ --platforma-z-modal: 550; /* page-modal content */ --platforma-z-popover: 700; /* tooltips, info-popovers */ --platforma-z-toast: 900; /* toast notifications (top-most) */ /* ── Focus-ring tokens (WCAG 2.1 SC 2.4.11 visible-focus) ──── Existing --platforma-focus-ring is accent-tinted; for primary brand actions we want the brand glow instead. */ --platforma-focus-ring-brand: 0 0 0 3px var(--platforma-brand-glow); --platforma-focus-ring-danger:0 0 0 3px rgba(241, 65, 108, 0.32); --platforma-focus-ring-success:0 0 0 3px rgba(80, 205, 137, 0.30); /* ── Page-frame max-widths (consistency across surfaces) ───── Today some admin pages are full-bleed, others wrap at 1080px, others at 1280px. These tokens give pages 3 deliberate sizes. */ --platforma-frame-narrow: 720px; /* article/onboarding flow */ --platforma-frame-default: 1180px; /* most admin pages */ --platforma-frame-wide: 1440px; /* dashboards + wide tables */ }