/* ============================================================================
arbetsmiljoplan.net — Designsystem-tema (Nivå A)
----------------------------------------------------------------------------
Drop-in override. Laddas EFTER /css/main.css. Rör ingen HTML/JS-logik —
remappar bara designtokens och restylar nyckelkomponenter till det nya
designsystemet (myndighetsblå + bygg/säkerhetsfärger, IBM Plex Sans,
lugnare hörn & skuggor).
INSTALLATION
1. Ladda upp denna fil till /css/amp-theme.css (via Cyberduck).
2. Lägg in EN rad i på varje sida, DIREKT EFTER main.css-raden:
Sidor: index.html, guide.html, om.html, kontakt.html,
integritetspolicy.html
© 2026 — bygger vidare på Way Below AB:s arbetsmiljoplan.net
============================================================================ */
/* IBM Plex Sans (rubriker/UI) + IBM Plex Mono (risknummer/AFS-referenser).
Måste ligga först. Source Sans 3 laddas redan av sidan. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
/* ── 1. TOKEN-REMAP — restylar ~80 % via kaskaden ───────────────────────── */
:root {
/* Struktur & interaktion → teknisk blå (myndighetsblå för djup) */
--color-accent: #2563EB; /* var #0369A1 */
--color-accent-hover: #1D4ED8;
--color-navy: #1E3A5F; /* NY — djup myndighetsblå (header/logo) */
/* Säkerhetsfärger */
--color-cta: #EA580C; /* varningsorange (oförändrad) */
--color-cta-hover: #C2410C;
--color-success: #15803D; /* godkänd grön (oförändrad) */
--color-warning: #EA580C; /* var #D97706 */
--color-attention: #FACC15; /* NY — varselgul */
--color-danger: #B91C1C; /* var #DC2626 — riskröd, sparsamt */
/* Neutraler (oförändrade — redan på system) */
--color-bg: #F8FAFC;
--color-surface: #FFFFFF;
--color-surface-2: #F1F5F9;
--color-border: #E2E8F0;
--color-border-light: #CBD5E1;
--color-text: #0F172A;
--color-text-muted: #475569; /* behålls för bra kontrast */
--color-text-dim: #94A3B8;
/* Lugnare hörn & skuggor (dokumentkänsla) */
--radius: 6px; /* var 3px — knappar, fält, chips */
--radius-lg: 10px; /* var 4px — kort & paneler */
--shadow: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
/* Typografi */
--font-heading: "IBM Plex Sans", "Lexend", "Source Sans 3", sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
/* ── 2. RUBRIKER — lugnare vikt, blå hero-accent (ej orange) ────────────── */
.amp-hero h1 { font-weight: 700 !important; letter-spacing: -.02em; }
.amp-hero h1 em { color: var(--color-accent) !important; }
.amp-hero__badge { color: var(--color-accent) !important; }
.amp-hero__inner::before { background: var(--color-accent) !important; }
.amp-panel h2 { letter-spacing: -.015em; }
/* ── 3. KNAPPAR — primär = blå (per designsystem) ───────────────────────── */
.btn { border-radius: var(--radius); }
.btn-primary {
background: var(--color-accent) !important;
border-color: var(--color-accent) !important;
color: #fff !important;
box-shadow: var(--shadow);
}
.btn-primary:hover {
background: var(--color-accent-hover) !important;
border-color: var(--color-accent-hover) !important;
}
/* Orange CTA finns kvar som egen variant: lägg till class="btn btn-cta".
Vill du hellre ha ORANGE primärknapp igen — byt --color-accent ovan mot
var(--color-cta) i .btn-primary. */
.btn-cta {
background: var(--color-cta);
border-color: var(--color-cta);
color: #fff;
}
.btn-cta:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-text); }
/* ── 4. NAVIGATION — navy logotypmärke ──────────────────────────────────── */
.amp-nav__logo-icon { background: var(--color-navy) !important; }
/* ── 5. STEPPER — blått aktivt, mono-nummer ─────────────────────────────── */
.amp-step__num {
border-radius: 5px;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* ── 6. FORMULÄRFÄLT — tydlig fokusring (tillgänglighet) ────────────────── */
.amp-input, .amp-textarea, .amp-select { border-radius: var(--radius); }
.amp-input:focus, .amp-textarea:focus, .amp-select:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
/* ── 7. RISKVAL (steg 2) — lugn bas + ORANGE accent (ej blå, ej röd) ─────── */
.amp-risk-item { border-radius: var(--radius); }
.amp-risk-item.selected {
border-color: var(--color-cta) !important;
border-left: 3px solid var(--color-cta) !important;
background: #FFF3EC !important;
}
.amp-risk-item.selected .amp-risk-check,
.amp-risk-item.selected .amp-risk-num {
background: var(--color-cta) !important;
border-color: var(--color-cta) !important;
color: #fff !important;
}
.amp-risk-num {
border-radius: 4px;
font-family: var(--font-mono);
}
.amp-risk-check { border-radius: 4px; }
/* ── 8. RISKKORT (steg 3) — mono-nummer, blå AFS-badge ──────────────────── */
.amp-riskcard__header .badge {
border-radius: 4px;
font-family: var(--font-mono);
background: var(--color-navy);
}
.amp-check-box { border-radius: 4px; }
/* ── 9. SAMMANFATTNING — orange vänsterbård (riskkoppling) ──────────────── */
.amp-summary-risk { border-left-color: var(--color-cta); }
/* ── 10. PROJEKTTYP & ROLLER — blå vald-stat ────────────────────────────── */
.amp-type-chip.selected {
border-color: var(--color-accent);
background: rgba(37, 99, 235, .07);
color: var(--color-accent);
}
.amp-role-card.selected { border-color: var(--color-accent); background: rgba(37, 99, 235, .05); }
.amp-role-card.selected strong { color: var(--color-accent); }
.amp-role-help {
background: rgba(37, 99, 235, .05);
border-color: rgba(37, 99, 235, .15);
border-left-color: var(--color-accent);
}
.amp-role-help strong { color: var(--color-accent); }
/* ── 11. INFO-KORT (startsida) — blå topp-accent ────────────────────────── */
.amp-feat-card__icon { color: var(--color-accent); }
/* ── 12. FOKUS — accentfärg följer automatiskt via var ──────────────────── */
:focus-visible { outline-color: var(--color-accent); }