/* ============================================
THEMA: BITBLAD
Gebruikt door bitblad (de werkplek HTML, CSS en JavaScript voor leerlingen).
Een werkblad als visuele wereld: warm papier, vermiljoen als merkkleur (de
coderegel en het venster van het beeldmerk), pruim als tweede kleur (het
blad), olijf en leisteen als accenten. De statuskleuren fout en
waarschuwing liggen bewust koel en donker (karmijn, oker): rood en amber
zouden anders op de merkkleur lijken. Systeemfonts voor de interface,
JetBrains Mono voor code; bitblad host dat font zelf via zijn fonts.css,
het framework laadt geen fonts.
Dit thema bevat naast tokens ook component-overrides (skin): het laadt
ná core en buiten de layers, dus het wint zonder core te raken. De skin
deelt de werkomgeving-vormentaal van stroomkring, zodat de twee STEM-tools
als paar lezen terwijl de kleur ze scheidt. De werkplekklassen van bitblad
(bb-*, cm-*) staan niet hier maar in de app-CSS van het product.
Gebruik:
(JetBrains Mono, door het product)
─── DARK MODE ───
Volledig via CSS (geen JS). Elke token die in dark mode verandert is
gedefinieerd met light-dark(licht, donker); color-scheme volgt standaard de
systeemvoorkeur en is overrulebaar met data-theme op . Merkkleuren
hebben een platte fallback vóór de light-dark()-regel. Donker = een donker
bureaublad: warm bruinzwart met papierwitte tekst.
─── CONTRAST (WCAG AA 4,5:1; gemeten 9 september 2026, licht / donker) ───
Tekst op --color-surface (#faf8f3 / #231f1e):
primary 4,78 / 7,06 primary-dark 8,17 / 9,61 secondary 8,80 / 8,62
accent-3 5,06 / 7,71 accent-4 7,09 / 7,45
error 6,79 / 6,50 warning 5,22 / 9,41 success 5,30 / 7,86
info 6,09 / 7,16 text 14,55 / 14,06 text-secondary 9,16 / 9,11
text-muted 5,72 / 5,22
Dezelfde kleuren op surface-raised en surface-sunken: alles boven 4,5;
laagste waarden primary op sunken 4,51 (licht) en text-muted op raised
4,84 (donker). Inverse tekst op de volle merk- en statuskleuren (knoppen,
toasts): minstens 5,08 licht en 6,50 donker; toast-warning 5,23 / 9,41.
Tekst van alerts en badges op hun tintvlak: minstens 6,52 / 7,11;
accent-dark op de 50%-tinten (tag, avatar): minstens 4,63. Merkband 13,18.
Aangepast ten opzichte van het eerste voorstel om overal 4,5 te halen:
olijf #6b7f2a werd #5e7223, oker #8a6a00 werd #836400, succes #2f7d4f werd
#2a7548 en surface-sunken #f3efe7 werd #f5f1ea.
============================================ */
:root {
color-scheme: light dark;
/* ─── Merkkleuren (vermiljoen #c73e1d) ─── */
--color-primary: #c73e1d;
--color-primary: light-dark(#c73e1d, #ff8a65);
--color-primary-dark: #8a2a12;
--color-primary-dark: light-dark(#8a2a12, #ffb59e);
/* Secundair (pruim, het blad): koel tegenover het warme vermiljoen */
--color-secondary: #6d2f66;
--color-secondary: light-dark(#6d2f66, #e0acdb);
--color-secondary-dark: #4a1f45;
--color-secondary-dark: light-dark(#4a1f45, #f0cdeb);
/* Accenten: vermiljoen (alias van primary), pruim, olijf, leisteen.
Ze flippen mee, want het zijn ook tekstkleuren op het donkere blad */
--color-accent-1: #c73e1d; --color-accent-1: light-dark(#c73e1d, #ff8a65);
--color-accent-2: #6d2f66; --color-accent-2: light-dark(#6d2f66, #e0acdb);
--color-accent-3: #5e7223; --color-accent-3: light-dark(#5e7223, #a7bb5e);
--color-accent-4: #4a5568; --color-accent-4: light-dark(#4a5568, #a4b0c4);
/* ─── Gradiënten — alleen voor borders ─── */
--gradient-brand: linear-gradient(24deg, #c73e1d 0%, #c73e1d 30%, #6d2f66 60%, #5e7223 80%, #4a5568 100%);
--gradient-primary: linear-gradient(135deg, #6d2f66 0%, #c73e1d 100%);
/* ─── UI Kleurschaal (primary 100–900, vermiljoen-ramp) ─── */
--color-primary-100: #f9ece8; --color-primary-100: light-dark(#f9ece8, #4a180b);
--color-primary-200: #f4d8d2; --color-primary-200: light-dark(#f4d8d2, #661d0c);
--color-primary-300: #e9b2a5; --color-primary-300: light-dark(#e9b2a5, #8a2a12);
--color-primary-400: #dd8b77; --color-primary-400: light-dark(#dd8b77, #c73e1d);
--color-primary-500: #c73e1d; --color-primary-500: light-dark(#c73e1d, #ff8a65);
--color-primary-600: #a93519; --color-primary-600: light-dark(#a93519, #ffb59e);
--color-primary-700: #8a2a12; --color-primary-700: light-dark(#8a2a12, #f4d8d2);
--color-primary-800: #661d0c; --color-primary-800: light-dark(#661d0c, #f9ece8);
--color-primary-900: #4a180b; --color-primary-900: light-dark(#4a180b, #fdf6f4);
/* ─── Secundaire schaal (pruim) — pruim is donker, dus de schaal keert in
dark mode om zoals de primaire: 500 en 700 volgen secondary en
secondary-dark ─── */
--color-secondary-100: #e9e0e8; --color-secondary-100: light-dark(#e9e0e8, #3a1a37);
--color-secondary-300: #bda1ba; --color-secondary-300: light-dark(#bda1ba, #56284f);
--color-secondary-500: #6d2f66; --color-secondary-500: light-dark(#6d2f66, #e0acdb);
--color-secondary-600: #5d2857; --color-secondary-600: light-dark(#5d2857, #e8bde3);
--color-secondary-700: #4a1f45; --color-secondary-700: light-dark(#4a1f45, #f0cdeb);
/* ─── Neutralen (warm papier; donker = warm bruinzwart) ─── */
--color-neutral-50: light-dark(#faf8f3, #231f1e);
--color-neutral-100: light-dark(#f5f1ea, #2a2523);
--color-neutral-200: light-dark(#e8e1d7, #352f2c);
--color-neutral-300: light-dark(#d6cec2, #463e3a);
--color-neutral-400: light-dark(#b5aa9b, #5f5751);
--color-neutral-500: light-dark(#877d70, #9a9088);
--color-neutral-600: light-dark(#6a6157, #c9c0b8);
--color-neutral-700: light-dark(#4a433c, #ddd6cf);
--color-neutral-800: light-dark(#2a2320, #f3ede8);
--color-neutral-900: light-dark(#1b1715, #faf7f4);
/* ─── Semantische UI tokens (inkt op papier; donker = bureaublad) ─── */
--color-surface: light-dark(#faf8f3, #231f1e);
--color-surface-raised: light-dark(#ffffff, #2a2523);
--color-surface-sunken: light-dark(#f5f1ea, #1b1817);
--color-border: light-dark(#d6cec2, #352f2c);
--color-border-strong: light-dark(#b5aa9b, #463e3a);
--color-text: light-dark(#2a2320, #f3ede8);
--color-text-secondary: light-dark(#4a433c, #c9c0b8);
--color-text-muted: light-dark(#6a6157, #9a9088);
--color-text-inverse: light-dark(#ffffff, #231f1e);
--color-overlay: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
/* Diepe vermiljoen merk-band — niet-flippend in dark mode */
--color-surface-brand: #4a180b;
--color-surface-brand-text: #f6f2ea;
/* ─── Semantische kleuren (status): bewust weg van de merkkleur.
Fout is koel karmijn, geen rood; waarschuwing is donker oker, geen amber;
succes een groen dat ver van olijf en vermiljoen leest; info koel blauw ─── */
--color-success: light-dark(#2a7548, #7cc397);
--color-success-dark: light-dark(#1f5a37, #c4e8d0);
--color-warning: light-dark(#836400, #e2c25a);
--color-warning-dark: light-dark(#5c4600, #f3e4b0);
--color-error: light-dark(#a61e4d, #f27fa6);
--color-error-dark: light-dark(#6e1233, #f8c9d8);
--color-info: light-dark(#2f5f9e, #86aee6);
--color-info-dark: light-dark(#1f4270, #cfdff5);
/* ─── Accent donker-varianten (tekst op de 50%-tinten van tag en avatar;
in dark mode zijn die tinten middentonen, dus de tekst wordt bijna wit) ─── */
--color-accent-2-dark: #4a1f45; --color-accent-2-dark: light-dark(#4a1f45, #fbf2fa);
--color-accent-3-dark: #3a4614; --color-accent-3-dark: light-dark(#3a4614, #e8efcd);
--color-accent-4-dark: #2f3846; --color-accent-4-dark: light-dark(#2f3846, #e4e8ef);
/* ─── 50% tints — surface als mix-base, flipt mee ─── */
--color-primary-50: color-mix(in srgb, var(--color-primary) 50%, var(--color-surface));
--color-primary-dark-50: color-mix(in srgb, var(--color-primary-dark) 50%, var(--color-surface));
--color-secondary-50: color-mix(in srgb, var(--color-secondary) 50%, var(--color-surface));
--color-accent-1-50: color-mix(in srgb, var(--color-accent-1) 50%, var(--color-surface));
--color-accent-2-50: color-mix(in srgb, var(--color-accent-2) 50%, var(--color-surface));
--color-accent-3-50: color-mix(in srgb, var(--color-accent-3) 50%, var(--color-surface));
--color-accent-4-50: color-mix(in srgb, var(--color-accent-4) 50%, var(--color-surface));
/* ─── Fonts: systeemfonts voor de interface, JetBrains Mono voor code.
Het product host JetBrains Mono zelf (fonts.css vóór dit thema); zonder
dat bestand valt de stack terug op het monospace-systeemfont ─── */
--font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-accent: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
/* Compactere paginatitels: dit is een werkomgeving, geen marketingsite */
--h1-font-size: var(--text-3xl);
/* ─── Shadows (spaarzaam, warm getint; donker = neutraal zwaarder) ─── */
--shadow-sm: 0 1px 2px light-dark(rgba(42, 35, 32, 0.06), rgba(0, 0, 0, 0.3));
--shadow-md: 0 2px 6px light-dark(rgba(42, 35, 32, 0.08), rgba(0, 0, 0, 0.4));
--shadow-lg: 0 8px 20px light-dark(rgba(42, 35, 32, 0.10), rgba(0, 0, 0, 0.5));
--shadow-xl: 0 16px 32px light-dark(rgba(42, 35, 32, 0.14), rgba(0, 0, 0, 0.6));
}
/* ─── Handmatige override (optioneel, zonder JS) ─── */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* ─── Component dark-mode fixes ─── */
/* De waarschuwingskleur is in licht donker oker en in donker licht oker:
de toast-tekst wisselt dus mee (papierwit op oker, bureaublad op licht oker) */
.toast-warning { color: light-dark(#fff8e6, #231f1e); }
/* Pruimtint als tekstselectie; de zusterthema's nemen daar ook hun secundaire kleur */
::selection {
background: light-dark(#bda1ba, #56284f);
color: var(--color-text);
}
/* ============================================
SKIN: WERKBLAD — component-overrides
Dezelfde vormentaal als de werkbank van stroomkring: tegels met zachte
hoeken, hairlines, stevige koppen in het systeemfont, statuskleuren als
tintvlak met kleurlijn. Alles via tokens: dark mode flipt mee.
============================================ */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; }
/* Cards: tegels op het werkblad, hairline en geen zweefschaduw */
.card {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: none;
}
.card-header { border-bottom: 1px solid var(--color-border); }
/* Alerts: zachte tintvlakken met een kleurlijn links */
.alert {
border: 0;
border-left: 3px solid currentColor;
border-radius: var(--radius-sm);
font-weight: 500;
}
.alert-success { background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface-raised)); color: var(--color-success-dark); }
.alert-warning { background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface-raised)); color: var(--color-warning-dark); }
.alert-error { background: color-mix(in srgb, var(--color-error) 14%, var(--color-surface-raised)); color: var(--color-error-dark); }
.alert-info { background: color-mix(in srgb, var(--color-info) 14%, var(--color-surface-raised)); color: var(--color-info-dark); }
/* Badges: kleine etiketten met status-dot */
.badge {
gap: 0.4em;
background: var(--color-neutral-100);
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
border-radius: var(--radius-sm);
font-weight: 600;
padding: 1px var(--space-sm);
color: var(--color-text-muted);
}
.badge::before {
content: "";
width: 0.5em;
height: 0.5em;
border-radius: var(--radius-full);
background: currentColor;
flex-shrink: 0;
}
.badge-success { background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); color: var(--color-success-dark); }
.badge-success::before { background: var(--color-success); }
.badge-warning { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); color: var(--color-warning-dark); }
.badge-warning::before { background: var(--color-warning); }
.badge-error { background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface)); color: var(--color-error-dark); }
.badge-error::before { background: var(--color-error); }
.badge-info { background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface)); color: var(--color-info-dark); }
.badge-info::before { background: var(--color-info); }
.badge-primary { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary-dark); }
.badge-primary::before { background: var(--color-primary); }
/* Buttons: rechthoekiger, rustiger gewicht */
.btn { border-radius: var(--radius-sm); font-weight: 600; }
/* Inputs: vermiljoen glow bij focus */
.input {
border-radius: var(--radius-sm);
background: var(--color-surface-raised);
}
.input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
/* Tabellen: caps-koppen zonder vlak, enkel horizontale lijnen */
.table th {
background: transparent;
border-bottom: 2px solid var(--color-text);
color: var(--color-text);
text-transform: uppercase;
font-size: var(--text-xs);
letter-spacing: 0.05em;
}
/* Chips: etiketten met stippellijn */
.chip {
background: transparent;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-sm);
}
/* Empty states: vermiljoen icoon */
.empty-state .material-icons {
font-size: 3rem;
margin-bottom: var(--space-lg);
color: var(--color-primary);
}