/* ============================================================ TEMAN – sex färdiga färgscheman ============================================================ Varje tema skriver bara över färgvariablerna från :root i styles.css. Typografi, radier och skuggor är gemensamma och rörs inte – det är färgen som byter, inte formspråket. Temat sätts som attribut på : Det görs av applyTheme() i config/theme.js, som läser APP_CONFIG.theme (grundmall → tjänstemall → ort) och därefter ett eventuellt val som ortens admin sparat i Firestore. "skog" är standard och är identiskt med :root, så en sida utan data-theme ser likadan ut som förut. Skuggfärgerna följer respektive tema, annars får ljusa teman en grönaktig skugga från grundpaletten. ============================================================ */ /* ---- 1. SKOG (standard) – gran, falurött, björk ---- */ [data-theme="skog"] { --ink: #1E2A24; --ink-soft: #47564E; --muted: #5F6C64; --forest: #2C4739; --forest-dk: #1C3126; --moss: #4A6353; --falu: #8F4131; --falu-dk: #70301F; --birch: #E9EDE6; --paper: #FBFCFA; --surface: #FFFFFF; --sidebar-bg: #1E2A24; --sidebar-fg: rgba(255,255,255,0.72); --btn-bg: var(--forest); --btn-fg: #FFFFFF; --banner-bg: #2C4739; --line: #D6DED3; --line-soft: #E4E9E1; --ok-bg: #DCE9DD; --ok-fg: #2C4739; --warn-bg: #F2E5CE; --warn-fg: #7A5518; --err: #A8402E; --shadow-sm: 0 1px 2px rgba(30,42,36,0.05); --shadow-md: 0 4px 16px rgba(30,42,36,0.07); --shadow-lg: 0 18px 48px rgba(30,42,36,0.14); } /* ---- 2. VERKSTAD – stål, varningsgult, betong ---- */ [data-theme="verkstad"] { --ink: #1F242B; --ink-soft: #444C57; --muted: #626B76; --forest: #2E3A47; --forest-dk: #1D2630; --moss: #4A5764; --falu: #9C6618; --falu-dk: #8A5813; --birch: #ECEDEF; --paper: #FBFBFC; --surface: #FFFFFF; --sidebar-bg: #1F242B; --sidebar-fg: rgba(255,255,255,0.72); --btn-bg: var(--forest); --btn-fg: #FFFFFF; --banner-bg: #2E3A47; --line: #D8DBDF; --line-soft: #E6E8EB; --ok-bg: #DCE6DE; --ok-fg: #2C4A36; --warn-bg: #F7E7C6; --warn-fg: #7A5518; --err: #A8402E; --shadow-sm: 0 1px 2px rgba(31,36,43,0.06); --shadow-md: 0 4px 16px rgba(31,36,43,0.08); --shadow-lg: 0 18px 48px rgba(31,36,43,0.16); } /* ---- 3. LJUNG – dovt lila, ljummen sand ---- */ [data-theme="ljung"] { --ink: #262130; --ink-soft: #4E4759; --muted: #6E6578; --forest: #4A3D5C; --forest-dk: #332A42; --moss: #5E5170; --falu: #9C4F6A; --falu-dk: #7A3B52; --birch: #EEEAF0; --paper: #FCFBFD; --surface: #FFFFFF; --sidebar-bg: #262130; --sidebar-fg: rgba(255,255,255,0.72); --btn-bg: var(--forest); --btn-fg: #FFFFFF; --banner-bg: #4A3D5C; --line: #DED8E2; --line-soft: #E9E4EC; --ok-bg: #E0E6DD; --ok-fg: #3E5540; --warn-bg: #F3E3CC; --warn-fg: #7A5518; --err: #A8402E; --shadow-sm: 0 1px 2px rgba(38,33,48,0.05); --shadow-md: 0 4px 16px rgba(38,33,48,0.07); --shadow-lg: 0 18px 48px rgba(38,33,48,0.14); } /* ---- 4. HAV – djupblått, kopparaccent ---- */ [data-theme="hav"] { --ink: #16242E; --ink-soft: #3C5060; --muted: #596B77; --forest: #1F4557; --forest-dk: #143140; --moss: #3E5F72; --falu: #A95D36; --falu-dk: #8A4A29; --birch: #E7EDF0; --paper: #FAFCFD; --surface: #FFFFFF; --sidebar-bg: #16242E; --sidebar-fg: rgba(255,255,255,0.72); --btn-bg: var(--forest); --btn-fg: #FFFFFF; --banner-bg: #1F4557; --line: #D2DDE3; --line-soft: #E2EAEE; --ok-bg: #D8E7E2; --ok-fg: #235248; --warn-bg: #F5E6CA; --warn-fg: #7A5518; --err: #A8402E; --shadow-sm: 0 1px 2px rgba(22,36,46,0.06); --shadow-md: 0 4px 16px rgba(22,36,46,0.08); --shadow-lg: 0 18px 48px rgba(22,36,46,0.15); } /* ---- 5. LERA – varm terrakotta, lin ---- */ [data-theme="lera"] { --ink: #2B211B; --ink-soft: #57463C; --muted: #786458; --forest: #6B3E2A; --forest-dk: #4E2C1D; --moss: #7A5741; --falu: #3F5D4A; --falu-dk: #2C4435; --birch: #F0EBE5; --paper: #FDFBF9; --surface: #FFFFFF; --sidebar-bg: #2B211B; --sidebar-fg: rgba(255,255,255,0.72); --btn-bg: var(--forest); --btn-fg: #FFFFFF; --banner-bg: #6B3E2A; --line: #E0D7CE; --line-soft: #EBE4DC; --ok-bg: #DEE7DC; --ok-fg: #3A5540; --warn-bg: #F4E5C8; --warn-fg: #7A5518; --err: #A8402E; --shadow-sm: 0 1px 2px rgba(43,33,27,0.06); --shadow-md: 0 4px 16px rgba(43,33,27,0.08); --shadow-lg: 0 18px 48px rgba(43,33,27,0.15); } /* ---- 6. NATT – mörkt läge ---- */ [data-theme="natt"] { --ink: #ECEFEC; --ink-soft: #C2CBC5; --muted: #8C9992; --forest: #7FA88C; --forest-dk: #9BBFA6; --moss: #8FAE99; --falu: #C97A66; --falu-dk: #DE9483; --birch: #161C19; --paper: #1E2622; --surface: #26302B; --sidebar-bg: #121714; --sidebar-fg: rgba(255,255,255,0.72); --btn-bg: #2E4636; --btn-fg: #EAF2EC; --banner-bg: #1B2620; --line: #2F3A34; --line-soft: #27302B; --ok-bg: #24352A; --ok-fg: #A8CDB2; --warn-bg: #3A3122; --warn-fg: #E0C285; --err: #E08573; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 18px 48px rgba(0,0,0,0.55); } /* Punktfixarna för mörkt läge behövs inte längre: de vita ytorna använder numera var(--surface), som varje tema sätter själv. */ /* Sidfoten är alltid mörk med ljus text, som sidomenyn. I mörkt läge blev --forest en ljus grön bakgrund, och den ljusa texten försvann. */ [data-theme="natt"] .footer { background: #121714; }