/* ===================================================================== themes.css — Van de Pol Infra Alle kleuren/vormen als CSS-variabelen. Een thema wordt geactiveerd via het attribuut data-theme="..." op het -element. Standaardthema (geen attribuut) = "industrieel". ===================================================================== */ :root, [data-theme="industrieel"] { /* Industrieel — zwart/wit + signaalgeel */ --bg: #ffffff; --bg-alt: #f4f4f5; /* lichte sectie-achtergrond */ --bg-contrast: #111114; /* donkere sectie/footer */ --surface: #ffffff; /* kaarten */ --border: #e4e4e7; --text: #18181b; --text-muted: #52525b; --text-oncontrast: #fafafa; /* tekst op donkere vlakken */ --muted-oncontrast: #a1a1aa; --accent: #ffd400; /* signaalgeel */ --accent-strong: #f5c400; --accent-text: #111114; /* tekst bovenop accent-knoppen */ --logo-filter: none; /* logo is zwart; op licht thema ongewijzigd */ --radius: 10px; --radius-lg: 18px; --shadow: 0 1px 2px rgba(17,17,20,.06), 0 8px 24px rgba(17,17,20,.08); --shadow-lg: 0 18px 50px rgba(17,17,20,.18); --maxw: 1180px; --font-head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } [data-theme="staal-oranje"] { --bg: #f6f6f4; --bg-alt: #eceae6; --bg-contrast: #1f2226; --surface: #ffffff; --border: #dcdad5; --text: #222428; --text-muted: #5c5f66; --text-oncontrast: #f7f7f5; --muted-oncontrast: #b6b3ab; --accent: #f06a1e; --accent-strong: #d95a12; --accent-text: #ffffff; --logo-filter: none; } [data-theme="clean-blauw"] { --bg: #ffffff; --bg-alt: #eef4fb; --bg-contrast: #0f2740; --surface: #ffffff; --border: #dbe6f1; --text: #142433; --text-muted: #51647a; --text-oncontrast: #f3f8ff; --muted-oncontrast: #9db6cf; --accent: #1f6fd6; --accent-strong: #195cb3; --accent-text: #ffffff; --logo-filter: none; } [data-theme="nacht"] { /* Donkere modus */ --bg: #121316; --bg-alt: #191b1f; --bg-contrast: #0a0b0d; --surface: #1c1f24; --border: #2c3037; --text: #f3f4f6; --text-muted: #a3a8b3; --text-oncontrast: #f3f4f6; --muted-oncontrast: #a3a8b3; --accent: #ffd400; --accent-strong: #ffdf3a; --accent-text: #111114; --logo-filter: invert(1) brightness(1.6); /* zwart logo zichtbaar op donker */ --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 18px 50px rgba(0,0,0,.6); } [data-theme="klei"] { /* Warme grond/klei-tinten + diepgroen accent */ --bg: #f7f1e7; --bg-alt: #efe5d4; --bg-contrast: #2b2417; --surface: #fffaf2; --border: #e2d4be; --text: #2c2517; --text-muted: #6b5d45; --text-oncontrast: #f7f1e7; --muted-oncontrast: #c2b193; --accent: #2f7d4f; --accent-strong: #266741; --accent-text: #ffffff; --logo-filter: none; }