@import url('https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css'); /* ═══════════════════════════════════════════════════════════════ KOSA Design System v1.0 Delade CSS-variabler för alla KOSA-verktyg. Inkludera i direkt efter tema-init-scriptet: Relativ sökväg per fil: Rotnivå (kosa-hubb.html): shared/kosa-design.css En nivå ned (Artikelstatistik/): ../shared/kosa-design.css ═══════════════════════════════════════════════════════════════ */ /* ── Ljust tema (standard) ──────────────────────────────────── */ :root { /* Guld */ --gold: #B8952A; --gold-light: #D4AF50; --gold-dim: rgba(184,149,42,.15); --gold-bg: #EFE7CC; --gold-border: #D8C282; /* Bakgrunder */ --bg: #E8E3D8; --card: #F2EDE4; --white: #F2EDE4; /* alias för --card, används av Hubb & Morgonbriefing */ --card2: #E2DDD2; /* Ramar */ --border: #D6CFC2; --border2: #CCC5B8; --border-strong: #BDB5A8; /* Text */ --text: #1A1714; --text2: #3D3830; --muted: #7A7268; --muted2: #A8A098; /* Semantiska */ --pos: #2D7A4F; --pos-bg: #EDF7F2; --neg: #B83232; --neg-bg: #FDF0F0; --blue: #3B5FA0; --blue-bg: #EEF3FB; --amber: #9A7020; --amber-bg: #FBF5E6; /* Skuggor */ --shadow: 0 1px 3px rgba(26,23,20,.06), 0 1px 2px rgba(26,23,20,.04); --shadow-md: 0 4px 12px rgba(26,23,20,.08), 0 2px 4px rgba(26,23,20,.04); /* Prognosverktyget-specifika (ljust) */ --green-bg: rgba(80,180,100,.08); --green-border: rgba(80,180,100,.25); --yr-bg: rgba(91,156,246,.05); --yr-border: rgba(91,156,246,.15); } /* ── Mörkt tema ─────────────────────────────────────────────── */ html[data-theme="dark"] { /* Guld */ --gold: #c8a84b; --gold-light: #e0c870; --gold-dim: rgba(200,168,75,.25); --gold-bg: rgba(200,168,75,.10); --gold-border: rgba(200,168,75,.30); /* Bakgrunder */ --bg: #0d0d0d; --card: #161616; --white: #161616; --card2: #1c1c1c; /* Ramar */ --border: rgba(200,168,75,.18); --border2: rgba(255,255,255,.06); --border-strong: rgba(200,168,75,.35); /* Text */ --text: #f4f3ef; --text2: #d0cdc5; --muted: rgba(244,243,239,.45); --muted2: rgba(244,243,239,.25); /* Semantiska */ --pos: #4caf7d; --pos-bg: rgba(76,175,125,.12); --neg: #e05252; --neg-bg: rgba(224,82,82,.12); --blue: #5b9cf6; --blue-bg: rgba(91,156,246,.10); --amber: #c8a84b; --amber-bg: rgba(200,168,75,.10); /* Skuggor */ --shadow: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.5); /* Prognosverktyget-specifika (mörkt) */ --green-bg: rgba(80,180,100,.12); --green-border: rgba(80,180,100,.40); --yr-bg: rgba(91,156,246,.07); --yr-border: rgba(91,156,246,.22); } /* ── Logotyp — tema-switching ────────────────────────────────── */ .kosa-wm-dark { display: none; } html[data-theme="dark"] .kosa-wm-light { display: none !important; } html[data-theme="dark"] .kosa-wm-dark { display: block !important; }