/* ============================================ SENZAI ACCENT SYSTEM — Central färgfil Inkluderas av alla appar utom Drive (som har eget system) Placeras i: /css/accent-system.css Användning: Senaste uppdatering: muted-färgerna i light mode justerade för WCAG 2.2 AA (4.5:1 mot Zen White #F8F9F7), samtliga landar nu mellan 5.36:1 och 5.56:1. ============================================ */ /* ============================================= DEFAULTS (Skog light — fallback) ============================================= */ :root { --color-accent: #1A4D2E; --color-accent-hover: #2D6943; --color-accent-light: #E8F0EA; --color-accent-subtle: #F0F5F1; --color-accent-text: #1A4D2E; --color-accent-muted: #3E6F4C; --color-accent-on: #F8F9F7; --color-accent-border: rgba(26, 77, 46, 0.2); } /* ============================================= ACCENT THEMES — LIGHT MODE ============================================= */ [data-accent="skog"] { --color-accent: #1A4D2E; --color-accent-hover: #2D6943; --color-accent-light: #E8F0EA; --color-accent-subtle: #F0F5F1; --color-accent-text: #1A4D2E; --color-accent-muted: #3E6F4C; --color-accent-on: #F8F9F7; --color-accent-border: rgba(26, 77, 46, 0.2); } [data-accent="hav"] { --color-accent: #1B5E8A; --color-accent-hover: #2980B9; --color-accent-light: #E6F1FB; --color-accent-subtle: #EBF3F8; --color-accent-text: #1B5E8A; --color-accent-muted: #1F6B9A; --color-accent-on: #F8F9F7; --color-accent-border: rgba(27, 94, 138, 0.2); } [data-accent="lavendel"] { --color-accent: #534AB7; --color-accent-hover: #7B6BB5; --color-accent-light: #EEEDFE; --color-accent-subtle: #F0EDF8; --color-accent-text: #3C3489; --color-accent-muted: #615ABA; --color-accent-on: #F8F9F7; --color-accent-border: rgba(83, 74, 183, 0.2); } [data-accent="koppar"] { --color-accent: #854F0B; --color-accent-hover: #A67840; --color-accent-light: #FAEEDA; --color-accent-subtle: #F8F0E8; --color-accent-text: #6B4520; --color-accent-muted: #8B5A1A; --color-accent-on: #F8F9F7; --color-accent-border: rgba(133, 79, 11, 0.2); } [data-accent="rose"] { --color-accent: #993556; --color-accent-hover: #B84A6E; --color-accent-light: #FBEAF0; --color-accent-subtle: #FCEEF3; --color-accent-text: #72243E; --color-accent-muted: #AB3F65; --color-accent-on: #F8F9F7; --color-accent-border: rgba(153, 53, 86, 0.2); } [data-accent="kricka"] { --color-accent: #0F6E56; --color-accent-hover: #1D9E75; --color-accent-light: #E1F5EE; --color-accent-subtle: #E8F5F0; --color-accent-text: #085041; --color-accent-muted: #0F7559; --color-accent-on: #F8F9F7; --color-accent-border: rgba(15, 110, 86, 0.2); } [data-accent="grafit"] { --color-accent: #5F5E5A; --color-accent-hover: #73726C; --color-accent-light: #F1EFE8; --color-accent-subtle: #F5F3ED; --color-accent-text: #2C2C2A; --color-accent-muted: #67665F; --color-accent-on: #F8F9F7; --color-accent-border: rgba(95, 94, 90, 0.2); } [data-accent="salvia"] { --color-accent: #3B6D11; --color-accent-hover: #4D8A1A; --color-accent-light: #EAF3DE; --color-accent-subtle: #EDF3ED; --color-accent-text: #27500A; --color-accent-muted: #467114; --color-accent-on: #F8F9F7; --color-accent-border: rgba(59, 109, 17, 0.2); } /* ============================================= DARK MODE — EXPLICIT ============================================= */ [data-theme="dark"] { --color-accent: #A8D5B8; --color-accent-hover: #6FB583; --color-accent-light: #0F3320; --color-accent-subtle: #1A4D2E; --color-accent-text: #E8F0EA; --color-accent-muted: #B5D4BC; --color-accent-on: #0F3320; --color-accent-border: rgba(168, 213, 184, 0.15); } [data-theme="dark"][data-accent="skog"] { --color-accent: #A8D5B8; --color-accent-hover: #6FB583; --color-accent-light: #0F3320; --color-accent-subtle: #1A4D2E; --color-accent-text: #E8F0EA; --color-accent-muted: #B5D4BC; --color-accent-on: #0F3320; --color-accent-border: rgba(168, 213, 184, 0.15); } [data-theme="dark"][data-accent="hav"] { --color-accent: #A8D0F0; --color-accent-hover: #85B7EB; --color-accent-light: #0C447C; --color-accent-subtle: #1B5E8A; --color-accent-text: #E6F1FB; --color-accent-muted: #B5D4F4; --color-accent-on: #0C447C; --color-accent-border: rgba(168, 208, 240, 0.15); } [data-theme="dark"][data-accent="lavendel"] { --color-accent: #C8C1F4; --color-accent-hover: #AFA9EC; --color-accent-light: #26215C; --color-accent-subtle: #3C3489; --color-accent-text: #EEEDFE; --color-accent-muted: #CECBF6; --color-accent-on: #26215C; --color-accent-border: rgba(200, 193, 244, 0.15); } [data-theme="dark"][data-accent="koppar"] { --color-accent: #F0D0A0; --color-accent-hover: #EF9F27; --color-accent-light: #412402; --color-accent-subtle: #633806; --color-accent-text: #FAEEDA; --color-accent-muted: #FAC775; --color-accent-on: #412402; --color-accent-border: rgba(240, 208, 160, 0.15); } [data-theme="dark"][data-accent="rose"] { --color-accent: #F4C0D1; --color-accent-hover: #ED93B1; --color-accent-light: #4B1528; --color-accent-subtle: #72243E; --color-accent-text: #FBEAF0; --color-accent-muted: #F4C0D1; --color-accent-on: #4B1528; --color-accent-border: rgba(244, 192, 209, 0.15); } [data-theme="dark"][data-accent="kricka"] { --color-accent: #9FE1CB; --color-accent-hover: #5DCAA5; --color-accent-light: #04342C; --color-accent-subtle: #085041; --color-accent-text: #E1F5EE; --color-accent-muted: #9FE1CB; --color-accent-on: #04342C; --color-accent-border: rgba(159, 225, 203, 0.15); } [data-theme="dark"][data-accent="grafit"] { --color-accent: #D3D1C7; --color-accent-hover: #B4B2A9; --color-accent-light: #2C2C2A; --color-accent-subtle: #444441; --color-accent-text: #F1EFE8; --color-accent-muted: #B4B2A9; --color-accent-on: #2C2C2A; --color-accent-border: rgba(211, 209, 199, 0.15); } [data-theme="dark"][data-accent="salvia"] { --color-accent: #C0DD97; --color-accent-hover: #97C459; --color-accent-light: #173404; --color-accent-subtle: #27500A; --color-accent-text: #EAF3DE; --color-accent-muted: #C0DD97; --color-accent-on: #173404; --color-accent-border: rgba(192, 221, 151, 0.15); } /* ============================================= DARK MODE — AUTO (följer systemet) ============================================= */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --color-accent: #A8D5B8; --color-accent-hover: #6FB583; --color-accent-light: #0F3320; --color-accent-subtle: #1A4D2E; --color-accent-text: #E8F0EA; --color-accent-muted: #B5D4BC; --color-accent-on: #0F3320; --color-accent-border: rgba(168, 213, 184, 0.15); } [data-theme="auto"][data-accent="skog"] { --color-accent: #A8D5B8; --color-accent-hover: #6FB583; --color-accent-light: #0F3320; --color-accent-subtle: #1A4D2E; --color-accent-text: #E8F0EA; --color-accent-muted: #B5D4BC; --color-accent-on: #0F3320; --color-accent-border: rgba(168, 213, 184, 0.15); } [data-theme="auto"][data-accent="hav"] { --color-accent: #A8D0F0; --color-accent-hover: #85B7EB; --color-accent-light: #0C447C; --color-accent-subtle: #1B5E8A; --color-accent-text: #E6F1FB; --color-accent-muted: #B5D4F4; --color-accent-on: #0C447C; --color-accent-border: rgba(168, 208, 240, 0.15); } [data-theme="auto"][data-accent="lavendel"] { --color-accent: #C8C1F4; --color-accent-hover: #AFA9EC; --color-accent-light: #26215C; --color-accent-subtle: #3C3489; --color-accent-text: #EEEDFE; --color-accent-muted: #CECBF6; --color-accent-on: #26215C; --color-accent-border: rgba(200, 193, 244, 0.15); } [data-theme="auto"][data-accent="koppar"] { --color-accent: #F0D0A0; --color-accent-hover: #EF9F27; --color-accent-light: #412402; --color-accent-subtle: #633806; --color-accent-text: #FAEEDA; --color-accent-muted: #FAC775; --color-accent-on: #412402; --color-accent-border: rgba(240, 208, 160, 0.15); } [data-theme="auto"][data-accent="rose"] { --color-accent: #F4C0D1; --color-accent-hover: #ED93B1; --color-accent-light: #4B1528; --color-accent-subtle: #72243E; --color-accent-text: #FBEAF0; --color-accent-muted: #F4C0D1; --color-accent-on: #4B1528; --color-accent-border: rgba(244, 192, 209, 0.15); } [data-theme="auto"][data-accent="kricka"] { --color-accent: #9FE1CB; --color-accent-hover: #5DCAA5; --color-accent-light: #04342C; --color-accent-subtle: #085041; --color-accent-text: #E1F5EE; --color-accent-muted: #9FE1CB; --color-accent-on: #04342C; --color-accent-border: rgba(159, 225, 203, 0.15); } [data-theme="auto"][data-accent="grafit"] { --color-accent: #D3D1C7; --color-accent-hover: #B4B2A9; --color-accent-light: #2C2C2A; --color-accent-subtle: #444441; --color-accent-text: #F1EFE8; --color-accent-muted: #B4B2A9; --color-accent-on: #2C2C2A; --color-accent-border: rgba(211, 209, 199, 0.15); } [data-theme="auto"][data-accent="salvia"] { --color-accent: #C0DD97; --color-accent-hover: #97C459; --color-accent-light: #173404; --color-accent-subtle: #27500A; --color-accent-text: #EAF3DE; --color-accent-muted: #C0DD97; --color-accent-on: #173404; --color-accent-border: rgba(192, 221, 151, 0.15); } } /* ============================================= SOLID BUTTONS — knappfyllnad (tillagd 2026-07-22) Ljust läge: solid = accentfärgen (som tidigare). Mörkt läge: solid = light-lägets muted-ton med ljus text (beslut "kandidat C", knapptest.php). ============================================= */ :root { --color-accent-solid: var(--color-accent); --color-accent-solid-text: #F8F9F7; } [data-theme="dark"], [data-theme="dark"][data-accent="skog"] { --color-accent-solid: #3E6F4C; } [data-theme="dark"][data-accent="hav"] { --color-accent-solid: #1F6B9A; } [data-theme="dark"][data-accent="lavendel"] { --color-accent-solid: #615ABA; } [data-theme="dark"][data-accent="koppar"] { --color-accent-solid: #8B5A1A; } [data-theme="dark"][data-accent="rose"] { --color-accent-solid: #AB3F65; } [data-theme="dark"][data-accent="kricka"] { --color-accent-solid: #0F7559; } [data-theme="dark"][data-accent="grafit"] { --color-accent-solid: #67665F; } [data-theme="dark"][data-accent="salvia"] { --color-accent-solid: #467114; } @media (prefers-color-scheme: dark) { [data-theme="auto"], [data-theme="auto"][data-accent="skog"] { --color-accent-solid: #3E6F4C; } [data-theme="auto"][data-accent="hav"] { --color-accent-solid: #1F6B9A; } [data-theme="auto"][data-accent="lavendel"] { --color-accent-solid: #615ABA; } [data-theme="auto"][data-accent="koppar"] { --color-accent-solid: #8B5A1A; } [data-theme="auto"][data-accent="rose"] { --color-accent-solid: #AB3F65; } [data-theme="auto"][data-accent="kricka"] { --color-accent-solid: #0F7559; } [data-theme="auto"][data-accent="grafit"] { --color-accent-solid: #67665F; } [data-theme="auto"][data-accent="salvia"] { --color-accent-solid: #467114; } }