/* ============================================
THEMA: TAALMAATJE
Een schoolschrift als visuele wereld: warm papier, balpen-blauwe inkt,
markeerstift-geel als secundair. Serif-koppen (Source Serif 4), hairlines,
zachte tintvlak-meldingen, omkaderde iconen, gestippelde chips.
Dit thema bevat naast tokens ook component-overrides (skin): het
laadt ná core en buiten de layers, dus het wint zonder core te raken.
Gebruikt door taalmaatje en de klaslab-website (klaslab/website).
Gebruik:
Fonts: Lexend (body, ontworpen voor leesvaardigheid) +
Source Serif 4 (accent: professioneel en zeer leesbaar tekst-serif).
In taalmaatje self-hosted als variable woff2 (Fontsource, SIL OFL):
laad fonts.css met de @font-face-blokken vóór dit thema.
─── 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.
============================================ */
:root {
color-scheme: light dark;
/* ─── Merkkleuren (balpen-blauw #1d4ed8) ─── */
--color-primary: #1d4ed8;
--color-primary: light-dark(#1d4ed8, #93c5fd);
--color-primary-dark: #172554;
--color-primary-dark: light-dark(#172554, #dbeafe);
/* Secundair (markeerstift-geel) — helder genoeg voor tekst op de donkere merk-band */
--color-secondary: #fde047;
--color-secondary-dark: #854d0e;
--color-secondary-dark: light-dark(#854d0e, #fef08a);
/* Accenten (gelijk in licht en donker, behalve hun -dark varianten) */
--color-accent-1: #fde047; /* alias van secondary (back-compat) */
--color-accent-2: #ea580c; /* Vermiljoen (rood potlood) */
--color-accent-3: #0d9488; /* Turkoois */
--color-accent-4: #db2777; /* Roze */
/* ─── Gradiënten — alleen voor borders ─── */
--gradient-brand: linear-gradient(24deg, #1d4ed8 0%, #1d4ed8 30%, #0d9488 60%, #db2777 80%, #fde047 100%);
--gradient-primary: linear-gradient(135deg, #fde047 0%, #1d4ed8 100%); /* marker↔inkt */
/* ─── UI Kleurschaal (primary 100–900, inkt-ramp) ─── */
--color-primary-100: #dbeafe; --color-primary-100: light-dark(#dbeafe, #172554);
--color-primary-200: #bfdbfe; --color-primary-200: light-dark(#bfdbfe, #1e3a8a);
--color-primary-300: #93c5fd; --color-primary-300: light-dark(#93c5fd, #1e40af);
--color-primary-400: #3b82f6; --color-primary-400: light-dark(#3b82f6, #1d4ed8);
--color-primary-500: #1d4ed8; --color-primary-500: light-dark(#1d4ed8, #93c5fd);
--color-primary-600: #1e40af; --color-primary-600: light-dark(#1e40af, #bfdbfe);
--color-primary-700: #1e3a8a; --color-primary-700: light-dark(#1e3a8a, #dbeafe);
--color-primary-800: #172554; --color-primary-800: light-dark(#172554, #eff6ff);
--color-primary-900: #0d1330; --color-primary-900: light-dark(#0d1330, #f8fafc);
/* ─── Secundaire schaal (marker-geel) — 600/700 flippen mee: geel is een
middentoon, dus tekstgebruik (tags, arrow-buttons) vraagt per modus
een eigen waarde ─── */
--color-secondary-100: #fef9c3; --color-secondary-100: light-dark(#fef9c3, #422006);
--color-secondary-300: #fde047; --color-secondary-300: light-dark(#fde047, #713f12);
--color-secondary-500: #fde047;
--color-secondary-600: #a16207; --color-secondary-600: light-dark(#a16207, #facc15);
--color-secondary-700: #854d0e; --color-secondary-700: light-dark(#854d0e, #fde047);
/* ─── Neutralen (warm papier; donker = inktnacht-blauwgrijs) ─── */
--color-neutral-50: light-dark(#fdfcf8, #151823);
--color-neutral-100: light-dark(#f8f6ef, #1d2130);
--color-neutral-200: light-dark(#efece1, #2b3044);
--color-neutral-300: light-dark(#ddd8c8, #3c4258);
--color-neutral-400: light-dark(#c3bda9, #565d75);
--color-neutral-500: light-dark(#97927f, #8b91a7);
--color-neutral-600: light-dark(#6a655a, #c3c7d6);
--color-neutral-700: light-dark(#4a463d, #dde0ea);
--color-neutral-800: light-dark(#302d27, #eef0f6);
--color-neutral-900: light-dark(#1c1a16, #f8f9fc);
/* ─── Semantische UI tokens (inkt op papier; donker = nachtschrift) ─── */
--color-surface: light-dark(#fdfcf8, #151823);
--color-surface-raised: light-dark(#fffef9, #1d2130);
--color-surface-sunken: light-dark(#f3f0e5, #10121a);
--color-border: light-dark(#ddd8c8, #2b3044);
--color-border-strong: light-dark(#c3bda9, #3c4258);
--color-text: light-dark(#1b2233, #eef0f6);
--color-text-secondary: light-dark(#3a4a6b, #c3c7d6);
--color-text-muted: light-dark(#6d685c, #8b91a7);
--color-text-inverse: light-dark(#ffffff, #151823);
--color-overlay: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
/* Diepe inktblauwe merk-band (CTA-secties, promo's) — niet-flippend in dark mode */
--color-surface-brand: #172554;
--color-surface-brand-text: #fdfcf2;
/* ─── Semantische kleuren (status) ─── */
--color-success: light-dark(#16a34a, #4ade80);
--color-success-dark: light-dark(#14532d, #bbf7d0);
--color-warning: light-dark(#f59e0b, #fbbf24);
--color-warning-dark: light-dark(#92400e, #fef3c7);
--color-error: light-dark(#dc2626, #f87171);
--color-error-dark: light-dark(#7f1d1d, #fecaca);
--color-info: light-dark(#0284c7, #38bdf8);
--color-info-dark: light-dark(#075985, #bae6fd);
/* ─── Accent donker-varianten ─── */
--color-accent-2-dark: #7c2d12; --color-accent-2-dark: light-dark(#7c2d12, #fdba74);
--color-accent-3-dark: #134e4a; --color-accent-3-dark: light-dark(#134e4a, #5eead4);
--color-accent-4-dark: #831843; --color-accent-4-dark: light-dark(#831843, #f9a8d4);
/* ─── 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 ───
Lexend is ontworpen om leesvaardigheid te verbeteren — passend voor
een taalhulp voor leerlingen, en professioneel strak in dashboards. */
--font-body: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-accent: 'Source Serif 4', Georgia, 'Times New Roman', serif;
/* Compactere paginatitels dan de framework-default (2.4rem is een
marketing-maat; dit is een werkomgeving) */
--h1-font-size: var(--text-3xl);
/* ─── Shadows (inkt-getint en spaarzaam; donker = neutraal zwaarder) ─── */
--shadow-sm: 0 1px 2px light-dark(rgba(23, 37, 84, 0.05), rgba(0, 0, 0, 0.3));
--shadow-md: 0 2px 6px light-dark(rgba(23, 37, 84, 0.07), rgba(0, 0, 0, 0.4));
--shadow-lg: 0 8px 20px light-dark(rgba(23, 37, 84, 0.09), rgba(0, 0, 0, 0.5));
--shadow-xl: 0 16px 32px light-dark(rgba(23, 37, 84, 0.12), 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 ─── */
.toast-warning { color: light-dark(#451a03, #151823); }
/* Markeerstift-geel als tekstselectie: hét schrift-detail */
::selection {
background: light-dark(#fef08a, #713f12);
color: var(--color-text);
}
/* Promo-gradient gepind op diepe tinten (zie oase.css voor de waarom) */
.footer-promo-membership {
background: linear-gradient(-45deg, light-dark(#854d0e, #713f12) 0%, light-dark(#172554, #0d1330) 100%);
}
/* ============================================
SKIN: SCHRIFT & INKT — component-overrides
Werkboek-vormentaal: kleine radii, hairlines, serif-koppen,
zachte tintvlak-meldingen, omkaderde iconen, krantencijfers.
Alles via tokens: dark mode flipt automatisch mee.
============================================ */
/* Serif-koppen: het schrift schrijft met Source Serif 4 */
h1, h2, h3, h4 { font-family: var(--font-accent); font-weight: 600; }
/* Cards: strak schrift-kader, geen zweefschaduw */
.card {
border-radius: var(--radius-sm);
box-shadow: none;
}
.card-header { border-bottom: 1px solid var(--color-border); }
/* Alerts: zachte tintvlakken — randloos, kalm, duidelijk */
.alert {
border: none;
border-radius: var(--radius-md);
font-weight: 600;
}
.alert-success { background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface-raised)); }
.alert-warning { background: color-mix(in srgb, var(--color-warning) 24%, var(--color-surface-raised)); }
.alert-error { background: color-mix(in srgb, var(--color-error) 16%, var(--color-surface-raised)); }
.alert-info { background: color-mix(in srgb, var(--color-info) 16%, var(--color-surface-raised)); }
/* Badges: kleine caps-etiketten met statuskleur — getint vlak, zachte
rand in de tekstkleur en een status-dot in de volle kleur ervoor */
.badge {
gap: 0.4em;
background: var(--color-neutral-100);
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.04em;
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); }
.badge-primary::before { background: var(--color-primary); }
/* Stat-cards: systeemkaartjes — wit vlak met gekleurde bovenlijn (als de
tab van een indexkaart), hairline rondom, zacht afgeronde onderhoeken */
.stat-card {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-top: 2px solid var(--color-text);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
box-shadow: none;
padding: var(--space-md) var(--space-lg);
}
.stat-value {
font-family: var(--font-accent);
font-weight: 700;
font-size: var(--text-4xl);
color: var(--color-text);
}
.stat-label { color: var(--color-text-muted); }
.stat-icon {
background: transparent;
border: 2px solid currentColor;
border-radius: var(--radius-sm);
color: var(--color-primary);
}
.stat-icon.tint-2 { color: var(--color-accent-2); }
.stat-icon.tint-3 { color: var(--color-accent-3); }
.stat-icon.tint-4 { color: var(--color-accent-4); }
.stat-icon.tint-warning { color: var(--color-warning-dark); }
.stat-card:has(.stat-icon.tint-2) { border-top-color: var(--color-accent-2); }
.stat-card:has(.stat-icon.tint-3) { border-top-color: var(--color-accent-3); }
.stat-card:has(.stat-icon.tint-4) { border-top-color: var(--color-accent-4); }
.stat-card:has(.stat-icon.tint-warning) { border-top-color: var(--color-warning-dark); }
/* Buttons: rechthoekiger, rustiger gewicht */
.btn { border-radius: var(--radius-sm); font-weight: 600; }
/* Inputs: schriftvakjes met marker-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-secondary) 35%, transparent);
}
/* Tabellen: enkel horizontale lijnen, caps-koppen zonder vlak */
.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: invulvakjes met stippellijn */
.chip {
background: transparent;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-sm);
}
/* Empty states: balpen-blauw icoon */
.empty-state .material-icons {
font-size: 3rem;
margin-bottom: var(--space-lg);
color: var(--color-primary);
}
/* ─── Marketing-componenten (hoofdwebsite op de apex) ─── */
/* Markeerstift-highlight voor een sleutelwoord in koppen: geel vlak over
de onderste helft, alsof er met een marker door de titel is gegaan.
Zelfde kleurenpaar als ::selection. */
.marker {
background: linear-gradient(180deg, transparent 45%, light-dark(#fde047, #713f12) 45%, light-dark(#fde047, #713f12) 94%, transparent 94%);
padding-inline: 0.04em;
}
/* Tool-cards: indexkaartje, geen zwevende tegel */
.tool-card { border-radius: var(--radius-sm); }
.tool-card:hover {
box-shadow: none;
transform: none;
}
/* Accordion: werkboekvakje met kleine radius en serif-vragen */
.accordion { border-radius: var(--radius-sm); }
.accordion > summary {
font-family: var(--font-accent);
font-size: var(--text-lg);
}
/* Diepe inktband (.section-brand, .footer): kernknoppen in markeerstift-geel
met inkt-tekst, outline-knoppen in papierwit. Balpen-blauw op inkt is
onleesbaar; vaste waarden want de band flipt niet in dark mode. */
.section-brand .btn-primary,
.footer .btn-primary {
background: #fde047;
border-color: #fde047;
color: #172554;
}
.section-brand .btn-primary:hover,
.footer .btn-primary:hover {
background: #facc15;
border-color: #facc15;
color: #172554;
}
.section-brand .btn-outline-primary,
.footer .btn-outline-primary {
color: var(--color-surface-brand-text);
border-color: color-mix(in srgb, var(--color-surface-brand-text) 60%, transparent);
}
.section-brand .btn-outline-primary:hover,
.footer .btn-outline-primary:hover {
background: color-mix(in srgb, var(--color-surface-brand-text) 12%, transparent);
color: var(--color-surface-brand-text);
}