/* ─────────────────────────────────────────────────────────────────────────── * MDAS design tokens — MAPPING-LAG over branding v2. * * Loades EFTER shared/static/core/branding_v2.css (som ejer farverne) og efter * pico.min.css (så Pico-variablerne kan overskrives). * * Filen definerer INGEN egne farver. Den beholder de token-NAVNE som * eksisterende CSS i 9 apps allerede bruger, og peger dem over på branding v2. * Derfor flipper hver regel der i forvejen skrev var(--accent) af sig selv, * uden at der skal rettes en linje i apps' CSS. * * Historisk lå der fire skins her (admin/portal/public-signing/public-candidate) * med hver sin accentfarve (grøn, blå og en mørkeblå gradient). * De er væk med vilje: fire konkurrerende farvesystemer på samme site er * præcis det, branding v2 skal rydde op i. sættes * fortsat (base_hr.html m.fl.), men styrer nu kun flade-nuancer, ikke kulør. * ─────────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand-aliaser (gamle navne → ny rampe) ──────────────────────────── * --mdas-green bruges 560+ steder som TEKST- og linkfarve, så den skal * være et trin med rigtig kontrast (brand-700 = 5,4:1). Den må aldrig * pege på brand-500, der kun er en flade. */ --mdas-green: var(--brand-700); --mdas-green-hover: var(--brand-800); --mdas-green-tint: var(--brand-200); --mdas-green-bg: var(--brand-50); --mdas-gul: var(--brand-500); /* Blå og mørkeblå udgår som brandfarver. De to navne bevares, fordi signing/candidate-flowene refererer dem, men peger nu på systemets egne farver. */ --mdas-blue: var(--plan-ekstern); --mdas-darkblue: var(--brand-900); --mdas-darkblue-2: var(--brand-900); /* ── Statusfarver ──────────────────────────────────────────────────────── */ --tone-success: var(--status-ok-fg); --tone-success-bg: var(--status-ok-bg); --tone-warn: var(--status-action-fg); --tone-warn-bg: var(--status-action-bg); --tone-danger: var(--status-error-fg); --tone-danger-bg: var(--status-error-bg); --tone-info: var(--status-neutral-fg); --tone-info-bg: var(--status-neutral-bg); --tone-neutral: var(--status-neutral-fg); --tone-neutral-bg: var(--status-neutral-bg); /* ── Spacing — 4px-grid (uændret) ──────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── Radius og skygge → branding v2 ────────────────────────────────────── */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-pill: var(--r-pill); /* ── Typografi → Inter ─────────────────────────────────────────────────── * --font-sans og --shadow-* står kun i branding_v2.css: gentaget her ville * var(--font-sans) referere sig selv, og et cyklisk token er ugyldigt. */ --font-mono: var(--font-num); --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 0.95rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.35rem; --text-2xl: 1.6rem; /* ── Layout ────────────────────────────────────────────────────────────── */ --content-max: 1200px; --content-narrow: 720px; --nav-height: 56px; /* ── Flader og tekst ───────────────────────────────────────────────────── */ --accent: var(--brand-700); --accent-hover: var(--brand-800); --accent-contrast: var(--white); --surface-muted: var(--surface); --surface-app: var(--page); --border: var(--line); --border-strong: var(--line-strong); --text: var(--ink); --text-muted: var(--muted); } /* ── Pico-overrides ───────────────────────────────────────────────────────── * Pico er stadig i brug under HR og de offentlige flows. Uden disse linjer * ville Picos egen blå slå igennem oven på branding v2. */ :root { --pico-primary: var(--accent); --pico-primary-hover: var(--accent-hover); --pico-primary-focus: var(--brand-100); --pico-font-size: 0.95rem; --pico-font-family: var(--font-sans); --pico-border-radius: var(--r-sm); --pico-primary-background: var(--brand-700); --pico-primary-border: var(--brand-700); } /* ── Skins: samme kulør, forskellige flader ─────────────────────────────── * Nav'en er hvid overalt nu. Tidligere havde portal-skinnet blå topbar og * candidate-skinnet en mørkeblå gradient; begge er erstattet af den mørke * brandbjælke (--brand-900), som forsiden også bruger. */ [data-skin] { --nav-bg: var(--card); --nav-border: var(--brand-500); --nav-text: var(--ink); --nav-active: var(--brand-700); --brand-color: var(--brand-500); } [data-skin="admin"] { --surface-app: var(--brand-50); } [data-skin="portal"] { --surface-app: var(--page); } [data-skin="public-signing"] { --surface-app: var(--page); } [data-skin="public-candidate"] { --surface-app: var(--page); } /* ── Globale grundlæggende stilarter ────────────────────────────────────── * Farve, font og linjeafstand sættes i branding_v2.css. Her kun det der * hænger på tokennavnene ovenfor. */ body { background: var(--surface-app); margin: 0; } a { color: var(--accent); } a:hover { color: var(--accent-hover); }