/* ============================================================
Huisstijl Neptunus — richting "Cool slate" (1b)
Licht (standaard) + donker + systeemvoorkeur, IBM Plex Sans
+ IBM Plex Mono.
Dit bestand bevat ALLEEN variabelen. Pas hier waarden aan;
raak master.css niet aan voor kleur- of typewijzigingen.
Plaats in: assets/css/huisstijl-neptunus.css
Vereiste webfonts (in de van elke pagina):
THEMA-MECHANISME (fase 50 van PLAN.md):
- De onderste van de drie kleurenblokken hieronder (gewoon
:root) is het LICHTE thema en geldt als standaard, ook
vóórdat iemand ingelogd is (bijv. op login.php).
- Is de systeemvoorkeur van het besturingssysteem donker
(prefers-color-scheme: dark) én heeft de -tag geen
data-theme="licht", dan geldt automatisch het donkere
thema. Zo volgt een nog niet ingelogde bezoeker, of een
gebruiker met voorkeur "systeem", vanzelf zijn apparaat.
- Heeft de -tag data-theme="donker", dan geldt altijd
het donkere thema, ongeacht de systeemvoorkeur.
- Heeft de -tag data-theme="licht", dan geldt altijd
het lichte thema, ongeacht de systeemvoorkeur.
Render de data-theme-waarde server-side op de -tag in
includes/shell.php op basis van users.theme_preference van de
ingelogde gebruiker (leeg/"systeem" => geen attribuut zetten).
============================================================ */
:root {
/* --- Kleuren: vlakken — LICHT (standaard) -------------------- */
--color-bg: #FFFFFF; /* paginaachtergrond: wit */
--color-bg-deep: #F6F7F9; /* zijbalk en andere teruggelegde vlakken */
--color-surface: #FFFFFF; /* kaarten, tabellen, formuliervelden */
--color-surface-hover: #F2F4F7; /* hover op rijen en actief menu-item */
--color-border: #E3E7ED; /* randen van kaarten en tabelkoppen */
--color-border-subtle: #EDEFF3; /* scheidingslijn tussen tabelrijen */
/* --- Kleuren: tekst — LICHT ---------------------------------- */
--color-text: #171B21; /* normale tekst en koppen */
--color-text-muted: #5B6472; /* secundaire tekst, labels, hulptekst */
--color-text-faint: #8A94A3; /* kolomkoppen, metagegevens, placeholder */
/* --- Kleuren: primair (acties, links, actief menu-item) — LICHT */
--color-primary: oklch(0.55 0.16 235);
--color-primary-hover: oklch(0.49 0.16 235);
--color-primary-soft: oklch(0.55 0.16 235 / 0.10);
--color-on-primary: #FFFFFF; /* tekstkleur bovenop een primaire knop */
/* --- Kleuren: status — LICHT --------------------------------- */
--color-success: oklch(0.50 0.12 155); /* betaald, actief */
--color-success-soft: oklch(0.50 0.12 155 / 0.10);
--color-warning: oklch(0.55 0.15 75); /* wacht op betaling, aanvraag */
--color-warning-soft: oklch(0.55 0.15 75 / 0.12);
--color-danger: oklch(0.50 0.16 25); /* verwijderen, foutmelding */
--color-danger-soft: oklch(0.50 0.16 25 / 0.10);
/* --- Accentkleur per bedrijf ------------------------------
Wordt door render_company_accent_style() overschreven met
de primaire kleur uit companies.primary_color. Zonder
bedrijf (superadmin, boekingspagina zonder match) valt hij
terug op de Neptunus-primair hierboven. */
--color-accent: var(--color-primary);
--color-accent-hover: var(--color-primary-hover);
/* --- Schaduw (subtiel, licht valt sneller op) — LICHT -------- */
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 8px 24px rgb(0 0 0 / 0.10);
/* --- Focusring — LICHT ---------------------------------------- */
--focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
color-scheme: light;
/* --- Typografie ------------------------------------------- */
--font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* alle UI-tekst */
--font-heading: var(--font-body); /* koppen: zelfde familie, zwaarder gewicht */
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* bedragen, aantallen, kolomkoppen, id's */
--weight-normal: 400; /* lopende tekst */
--weight-medium: 500; /* knoppen, actief menu-item, bedragen */
--weight-bold: 600; /* koppen */
--text-xs: 0.6875rem; /* 11px — metagegevens */
--text-sm: 0.8125rem; /* 13px — tabelinhoud, labels, knoppen */
--text-md: 0.875rem; /* 14px — standaard body en menu */
--text-lg: 1rem; /* 16px — tussenkopjes */
--text-xl: 1.5rem; /* 24px — paginakop en KPI-cijfers */
--leading-tight: 1.25; /* koppen */
--leading-body: 1.6; /* lopende tekst */
/* Labels en kolomkoppen: mono, klein, licht gespatieerd, hoofdletters.
Gebruik deze drie samen voor een consistente look. */
--label-size: 0.625rem; /* 10px */
--label-spacing: 0.1em;
--label-transform: uppercase;
--heading-spacing: -0.015em; /* koppen iets krapper spatiëren */
/* --- Afronding -------------------------------------------- */
--radius-sm: 4px; /* badges, statuslabels */
--radius-md: 6px; /* knoppen, invoervelden */
--radius-lg: 8px; /* kaarten, tabellen, panelen */
--radius-nav: 7px; /* menu-items in de zijbalk */
/* --- Ruimte (consistente reeks) --------------------------- */
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.5rem; /* 24px */
--spacing-6: 2rem; /* 32px */
--spacing-7: 3rem; /* 48px — ruimte tussen secties */
--spacing-8: 4rem; /* 64px — grote paginamarges */
--spacing-9: 6rem; /* 96px — zelden nodig, wel beschikbaar */
/* --- Vaste toepassingen van de ruimte-schaal ---------------
Gebruik deze in plaats van rechtstreeks een spacing-* getal,
zodat elke knop/kaart/pagina altijd dezelfde ruimte gebruikt. */
--space-card-padding: var(--spacing-5); /* binnenkant van kaarten/panelen */
--space-page-padding-inline: var(--spacing-6); /* linker/rechter paginamarge */
--space-section-gap: var(--spacing-7); /* tussen secties op één pagina */
--space-field-gap: var(--spacing-4); /* tussen formuliervelden */
--space-button-padding-block: var(--spacing-2); /* boven/onder in een knop */
--space-button-padding-inline: var(--spacing-4); /* links/rechts in een knop */
/* --- Extra typografie --------------------------------------- */
--text-2xl: 2rem; /* 32px — groot getal, bijv. prijs op de boekingspagina */
/* --- Randen ------------------------------------------------- */
--border-width: 1px; /* dikte van elke rand in het project */
/* --- Stapelvolgorde ------------------------------------------ */
--z-dropdown: 10;
--z-overlay: 100; /* bijv. de zijbalk-overlay op smalle schermen */
/* --- Layout ----------------------------------------------- */
--sidebar-width: 212px; /* breedte van de vaste zijbalk */
--content-max: 1280px; /* maximale breedte van het contentgebied */
/* --- Breakpoints --------------------------------------------
Alleen documentatie + bruikbaar vanuit JavaScript
(getComputedStyle). CSS staat geen custom property toe in
de voorwaarde van een @media-regel: gebruik daar altijd de
letterlijke waarden 1024px (tablet) en 640px (telefoon). */
--breakpoint-tablet: 1024px;
--breakpoint-mobile: 640px;
}
/* Systeemvoorkeur: volg het besturingssysteem zolang er geen
expliciete keuze voor "licht" is vastgelegd op de -tag.
Geldt dus voor theme_preference "systeem" én voor elke pagina
van vóór het inloggen, waar nog geen voorkeur bekend is. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="licht"]) {
--color-bg: #0E1116;
--color-bg-deep: #0A0D11;
--color-surface: #151A21;
--color-surface-hover: #18202A;
--color-border: #232A33;
--color-border-subtle: #1D232B;
--color-text: #E8EDF3;
--color-text-muted: #8C99A8;
--color-text-faint: #768392;
--color-primary: oklch(0.72 0.13 235);
--color-primary-hover: oklch(0.78 0.13 235);
--color-primary-soft: oklch(0.72 0.13 235 / 0.12);
--color-on-primary: #0E1116;
--color-success: oklch(0.74 0.12 155);
--color-success-soft: oklch(0.74 0.12 155 / 0.12);
--color-warning: oklch(0.75 0.13 75);
--color-warning-soft: oklch(0.75 0.13 75 / 0.12);
--color-danger: oklch(0.70 0.13 25);
--color-danger-soft: oklch(0.70 0.13 25 / 0.12);
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40);
--shadow-md: 0 8px 24px rgb(0 0 0 / 0.45);
--focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
color-scheme: dark;
}
}
/* Expliciete keuze "donker": wint altijd, ongeacht systeemvoorkeur. */
:root[data-theme="donker"] {
--color-bg: #0E1116;
--color-bg-deep: #0A0D11;
--color-surface: #151A21;
--color-surface-hover: #18202A;
--color-border: #232A33;
--color-border-subtle: #1D232B;
--color-text: #E8EDF3;
--color-text-muted: #8C99A8;
--color-text-faint: #768392;
--color-primary: oklch(0.72 0.13 235);
--color-primary-hover: oklch(0.78 0.13 235);
--color-primary-soft: oklch(0.72 0.13 235 / 0.12);
--color-on-primary: #0E1116;
--color-success: oklch(0.74 0.12 155);
--color-success-soft: oklch(0.74 0.12 155 / 0.12);
--color-warning: oklch(0.75 0.13 75);
--color-warning-soft: oklch(0.75 0.13 75 / 0.12);
--color-danger: oklch(0.70 0.13 25);
--color-danger-soft: oklch(0.70 0.13 25 / 0.12);
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40);
--shadow-md: 0 8px 24px rgb(0 0 0 / 0.45);
--focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
color-scheme: dark;
}