/* =========================================================== * Designtokens — delad källa för båda render-världar: * - SPA (public/js/*) via length i app/layout.tsx * - App Router (app/**) via samma layout * * Lägg ALDRIG nya råa hex-värden i style.css eller komponent- * CSS — gå via en token här. Alias-blocket längst ned håller * befintliga namn (--brand, --bg, --border, --text-muted, * --font, --white) levande så att 40 SPA-sidor inte måste * skrivas om. Pek-om snarare än byt-ut. * =========================================================== */ :root { /* Ytor & text — baspalett */ --ink: #1b2638; /* mörk skiffer — sidebar/topbar, mörka ytor, rubriker */ --ink-2: #1e4e8c; --paper: #ffffff; /* kort */ --cream: #f6f7f9; /* app-bakgrund */ --cream-2: #eef1f5; /* ikonytor / mjuk fyllning */ --text: #27364a; --muted: #5b6776; --line: #e5e8ee; /* Accent — EN blå */ --blue: #2563eb; --blue-deep: #1d4ed8; --blue-soft: #8ab4ff; /* Geometri */ --radius: 12px; /* kontroller, fält, tabellceller */ --radius-lg: 18px; /* kort, modaler */ --shadow: 0 1px 2px rgba(15,23,42,.06), 0 12px 32px -12px rgba(15,23,42,.16); --shadow-lg: 0 2px 6px rgba(15,23,42,.08), 0 28px 60px -20px rgba(15,23,42,.22); /* Typografi — variablerna injekteras av next/font i app/layout.tsx */ --font-heading: var(--font-fraunces), Georgia, serif; --font-body: var(--font-schibsted), system-ui, -apple-system, sans-serif; /* --- Alias: håll befintliga namn i style.css levande, peka om till nya systemet. INGA fler ändringar krävs i enskilda sidlayouter — de ärver via dessa aliaser. --- */ --bg: var(--cream); --white: var(--paper); --border: var(--line); --text-muted: var(--muted); --brand: var(--blue); /* accent/primär (knappar, länkar, aktiva states) */ --brand-dark: var(--ink); /* mörk chrome/ytor */ --font: var(--font-body); /* ───────────────────────────────────────────────────────── * SEMANTISKA TOKENS (Etapp 0 — UI-omskinning) * * Lagrad ovanpå baspaletten så att komponenter beskrivs i * AVSIKT (success / warning / surface-card) i st.f. färg/ * geometri (grön / hex / 18px). De 219 hårdkodade hexarna i * SPA-sidorna ska migreras till dessa — INTE bli 219 lokala * beslut. * * Värden som inte passar någon befintlig token flaggas i PR:n * i st.f. att hårdkodas vidare. * ───────────────────────────────────────────────────────── */ /* Status / feedback — full + svag (soft) + djup (deep för text/border) */ --success: #00A550; --success-deep: #007a3b; --success-soft: rgba(0,165,80,.10); --warning: #f59e0b; --warning-deep: #92400e; --warning-soft: #fffbeb; --danger: #dc2626; --danger-deep: #991b1b; --danger-soft: rgba(220,38,38,.10); --info: var(--blue); --info-deep: var(--blue-deep); --info-soft: rgba(37,99,235,.10); /* Yta-hierarki — beskriv VAR en yta hör, inte vilken färg den har */ --surface-page: var(--cream); /* sidans bakgrund */ --surface-card: var(--paper); /* kort / paneler */ --surface-inset: var(--cream-2); /* nedsänkta ytor: ikonramar, tabellhuvuden, badges */ --surface-dark: var(--ink); /* mörka sektioner (sidomenyn, platform-banner) */ --surface-on-dark: rgba(255,255,255,.06); /* subtila tonytor inuti mörka sektioner */ /* Text-hierarki — VIKT, inte storlek */ --text-primary: var(--ink); /* rubriker, primär brödtext */ --text-body: var(--text); /* vanlig brödtext */ --text-secondary: var(--muted); /* dämpad text, hjälptext, label */ --text-on-dark: #d8e1f0; /* text mot mörka sektioner */ /* Interaktion */ --focus-ring: 0 0 0 3px rgba(37,99,235,.30); --hover-tint: rgba(15,23,42,.04); --active-tint: rgba(15,23,42,.08); /* Spacing-skala — matchas mot landningssidans rytm */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; /* midpoint — refereras bl.a. av .auth-card padding */ --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Sidluft (layout-rotorsaksfixen, docs/LAYOUT_PADDING_DIAGNOS.md): EN definition av sidopadding för hela plattformen — .main-content (SPA) och .standalone-page (fristående routes) läser samma tokens. Clamp ger responsivitet utan breakpoint-hopp (mobilminimum 16px inbyggt). */ --page-pad-x: clamp(16px, 3vw, 32px); --page-pad-y: clamp(16px, 2.5vw, 28px); /* Inre kort-padding (rotorsaksfixen, docs/KORT_INRE_PADDING_DIAGNOS.md): .card får denna som DEFAULT — kant-till-kant kräver explicit .card--flush. Max-värdena speglar .card-body:s klassiska --space-5/--space-6 (20/24px) → strukturerade kort ändras inte; clamp-minimum ger mobilluft utan breakpoint. */ --card-pad-y: clamp(16px, 2vw, 20px); --card-pad-x: clamp(16px, 2.5vw, 24px); /* Typografi-skala — Fraunces sparsamt (display + rubriker), Schibsted för allt annat. Storlekarna ärvs av .page-title, .stat-value, .section-head h2 m.fl. — inga lokala font-size:Xpx i komponentstilar. */ --fs-eyebrow: .78rem; --fs-sm: .85rem; --fs-body: .95rem; --fs-md: 1rem; --fs-lg: 1.1rem; --fs-lead: 1.15rem; /* midpoint mellan --fs-lg (1.1) och --fs-h3 (1.22); refereras av .att-granska-banner__chevron */ --fs-h3: 1.22rem; --fs-h2: clamp(1.65rem, 3.2vw, 2.2rem); /* sidtitlar i SPA */ --fs-h1: clamp(2rem, 4vw, 2.8rem); --fs-display: clamp(2rem, 4.2vw, 2.8rem); /* stat-värden, nyckeltal */ /* Geometri — touch */ --tap-target: 44px; /* WCAG-rekommendation */ /* Stat-tone-alias så .stat-value.green / .red kan migreras vidare till .stat-value[data-tone] utan att bryta dagens markup. */ --stat-positive: var(--success); --stat-negative: var(--danger); /* Breakpoints (som CSS-variabler kan inte användas i @media-villkor, men dokumenteras här som SOURCE OF TRUTH för komponentlagret). */ /* --bp-mobile: 480px; /* telefon */ /* --bp-tablet: 760px; /* tablet / split-collapse — matchar #381 */ /* --bp-desktop: 1080px; /* bred desktop */ }