@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); @import url('https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css'); /* ═══════════════════════════════════════════════════════════════ digi22 Design System v1.0 Delade CSS-variabler för alla digi22-verktyg. Inkludera i direkt efter tema-init-scriptet: Relativ sökväg per fil: Rotnivå (digi22-hubb.html): shared/digi22-design.css En nivå ned (Mitt Digi22/): ../shared/digi22-design.css ═══════════════════════════════════════════════════════════════ */ /* ── Ljust tema (standard) — Sandy ─────────────────────────── */ :root { /* digi22 primärfärg (teal/green) */ --accent: #7AADA0; --accent-dark: #2B4538; --accent-dim: rgba(122,173,160,.15); --accent-bg: #E1EDE8; --accent-border: #7AADA0; /* Bakåtkompatibilitet — --gold pekar på --accent så befintlig CSS fungerar */ --gold: #7AADA0; --gold-light: #9AC5BB; --gold-dim: rgba(122,173,160,.15); --gold-bg: #E1EDE8; --gold-border: #7AADA0; /* Bakgrunder — sandy */ --bg: #F3F1EB; --card: #FEFEFC; --white: #FEFEFC; --card2: #EAE7DF; /* Ramar */ --border: rgba(24,24,15,.08); --border2: rgba(24,24,15,.15); --border-strong: rgba(24,24,15,.25); /* Text */ --text: #18180F; --text2: #3A3A2E; --muted: #5C5B50; --muted2: #9C9B8E; /* Semantiska */ --pos: #2B4538; --pos-bg: #E1EDE8; --neg: #A83030; --neg-bg: #FAEDED; --blue: #2A4A7A; --blue-bg: #E8EEF8; --amber: #C4622D; --amber-bg: #FAF0EA; /* Skuggor */ --shadow: 0 1px 3px rgba(24,24,15,.06), 0 1px 2px rgba(24,24,15,.04); --shadow-md: 0 4px 12px rgba(24,24,15,.08), 0 2px 4px rgba(24,24,15,.04); /* Prognosverktyget-specifika (ljust) */ --green-bg: rgba(43,69,56,.08); --green-border: rgba(43,69,56,.25); --yr-bg: rgba(42,74,122,.05); --yr-border: rgba(42,74,122,.15); } /* ── Vitt tema (rent) ────────────────────────────────────────── */ html[data-theme="white"] { --accent: #7AADA0; --accent-dark: #2B4538; --accent-dim: rgba(122,173,160,.10); --accent-bg: #EEF5F3; --accent-border: #B0D0CA; --gold: #7AADA0; --gold-light: #9AC5BB; --gold-dim: rgba(122,173,160,.10); --gold-bg: #EEF5F3; --gold-border: #B0D0CA; --bg: #F5F5F5; --card: #FFFFFF; --white: #FFFFFF; --card2: #F0F0F0; --border: #E5E5E5; --border2: #DEDEDE; --border-strong: #CCCCCC; --text: #18180F; --text2: #3A3A2E; --muted: #5C5B50; --muted2: #9C9B8E; --pos: #2B4538; --pos-bg: #EEF5F3; --neg: #A83030; --neg-bg: #FAEDED; --blue: #2A4A7A; --blue-bg: #E8EEF8; --amber: #C4622D; --amber-bg: #FAF0EA; --shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02); --shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.02); --green-bg: rgba(43,69,56,.06); --green-border: rgba(43,69,56,.18); --yr-bg: rgba(42,74,122,.04); --yr-border: rgba(42,74,122,.10); } /* ── Mörkt tema ─────────────────────────────────────────────── */ html[data-theme="dark"] { --accent: #7AADA0; --accent-dark: #4A8070; --accent-dim: rgba(122,173,160,.25); --accent-bg: rgba(122,173,160,.10); --accent-border: rgba(122,173,160,.30); --gold: #7AADA0; --gold-light: #9AC5BB; --gold-dim: rgba(122,173,160,.25); --gold-bg: rgba(122,173,160,.10); --gold-border: rgba(122,173,160,.30); --bg: #0d0d0b; --card: #161612; --white: #161612; --card2: #1c1c17; --border: rgba(122,173,160,.18); --border2: rgba(255,255,255,.06); --border-strong: rgba(122,173,160,.35); --text: #F0EFEB; --text2: #D0CEC8; --muted: rgba(240,239,235,.45); --muted2: rgba(240,239,235,.25); --pos: #5EAD90; --pos-bg: rgba(94,173,144,.12); --neg: #E05252; --neg-bg: rgba(224,82,82,.12); --blue: #5B9CF6; --blue-bg: rgba(91,156,246,.10); --amber: #D4844A; --amber-bg: rgba(212,132,74,.10); --shadow: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.5); --green-bg: rgba(43,69,56,.12); --green-border: rgba(43,69,56,.40); --yr-bg: rgba(42,74,122,.07); --yr-border: rgba(42,74,122,.22); } /* ── Logotyp — tema-switching ────────────────────────────────── */ .digi22-wm-dark { display: none; } html[data-theme="dark"] .digi22-wm-light { display: none !important; } html[data-theme="dark"] .digi22-wm-dark { display: block !important; } html[data-theme="white"] .digi22-wm-dark { display: none !important; } html[data-theme="white"] .digi22-wm-light { display: block !important; } /* Bakåtkompatibilitet — samma som KOSA */ .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; } html[data-theme="white"] .kosa-wm-dark { display: none !important; } html[data-theme="white"] .kosa-wm-light { display: block !important; }