/* ===================================================================== SEMANTISCHE TOKENLAAG — rol-gebaseerde tokens bovenop variables.css --------------------------------------------------------------------- Componenten horen ALLEEN deze tokens te gebruiken (niet de ruwe kleuren als --white/--black). Zo kan een skin (data-skin op ) de hele look centraal omwisselen zonder componenten aan te raken. Lagen: - :root → flat-skin (default) = de huidige look, exact - [data-theme="dark"] → werkt automatisch door via de ruwe tokens; alleen expliciete afwijkingen staan hieronder - [data-skin="glass"] → zie skin-glass.css (herdefinieert deze laag) ===================================================================== */ :root { /* --- Oppervlakken --- */ --color-bg: var(--white); /* paginakleur */ --color-surface: var(--white); /* kaarten, panelen, modals */ --color-surface-raised: var(--white); /* zwevende elementen (dropdown, popover) */ --color-surface-subtle: var(--white); /* lichte tegels: onder glass extra transparant */ --color-surface-hover: var(--grey-lightest); /* hover op rijen/tegels binnen een surface */ /* --- Randen & lijnen --- */ --color-border: var(--grey-light); --color-border-hover: var(--grey-medium); /* Lijn BINNEN een vlak (kolomscheiding, rijscheiding). Onder glass is --color-border een lichte rand óm het vlak; diezelfde kleur binnenin een licht vlak is onzichtbaar. Daarom een eigen token. */ --color-divider: var(--grey-light); --surface-border: 1px solid var(--grey-light); /* --- Tekst --- */ --color-text: var(--black); --color-text-muted: var(--grey-medium); --color-text-on-accent: var(--white); /* --- Accent (Kracht-blauw) --- */ --color-accent: var(--primary-color); --color-accent-hover: var(--primary-color-dark); /* --- Materiaal --- */ --surface-blur: none; /* blur voor hoofdvlakken (navbar, sidebar, modal) */ --card-blur: none; /* lichtere blur voor herhaalde kaarten/tegels */ --elevation: 0 1px 3px var(--shadow-color); /* rust-schaduw (cards, tegels) */ --elevation-raised: 0 4px 12px var(--shadow-color); /* hover/zwevend */ --elevation-overlay: 0 10px 40px rgba(0, 0, 0, 0.2); /* modals/overlays */ --overlay-scrim: rgba(0, 0, 0, 0.5); /* modal-backdrop */ --radius-card: var(--border-radius-normal); /* 12px */ --radius-control: var(--border-radius-small); /* 8px */ /* --- Invoervelden (flat = onderstreept veld; glass zet hier volledige rand + radius + translucente fill) --- */ --input-bg: var(--white); --input-text: var(--black); --input-border: none; --input-border-bottom: 1px solid var(--grey-light); --input-radius: 0; --input-focus-border-color: var(--primary-color); /* --- Inverse (geselecteerde/actieve tegels, donkere vlakken) --- */ --color-inverse-surface: var(--background-dark-color); --color-inverse-text: var(--background-light-color); /* --- Knoppen: fills per variant, zodat een skin ze kan herdefiniëren. Waarden = exact de huidige flat-stijlen uit buttons.css. --- */ --btn-default-bg: var(--black); --btn-default-border: var(--black); --btn-default-text: var(--light-color); --btn-default-hover-bg: var(--white); --btn-default-hover-border: var(--grey-medium); --btn-default-hover-text: var(--black); --btn-primary-bg: var(--primary-color); --btn-primary-border: var(--primary-color); --btn-primary-hover-bg: var(--primary-color-dark); --btn-primary-hover-border: var(--primary-color-dark); --btn-secondary-bg: var(--secondary-color); --btn-secondary-border: var(--secondary-color); --btn-secondary-text: var(--white); --btn-secondary-hover-bg: var(--secondary-color-dark); --btn-secondary-hover-border: var(--secondary-color-dark); --btn-danger-bg: var(--danger-color); --btn-danger-border: var(--danger-color); --btn-danger-text: var(--danger-color-dark); --btn-danger-hover-bg: var(--danger-color-dark); --btn-danger-hover-border: var(--danger-color-dark); --btn-danger-hover-text: var(--white); --btn-approve-bg: var(--approve-color); --btn-approve-border: var(--approve-color); --btn-approve-text: var(--approve-color-dark); --btn-approve-hover-bg: var(--approve-color-dark); --btn-approve-hover-border: var(--approve-color-dark); --btn-approve-hover-text: var(--white); /* --- Interactie --- */ --focus-ring: 0 0 0 3px rgba(0, 157, 225, 0.35); /* Kracht-blauw, ook in dark */ /* --- Status (mapt op de dark-aware badge-tokens) --- */ --color-danger: var(--badge-error-text); --color-danger-bg: var(--badge-error); --color-success: var(--badge-complete-text); --color-success-bg: var(--badge-complete); --color-warning: var(--badge-processing-text); --color-warning-bg: var(--badge-processing); } /* Dark mode: de ruwe tokens (--white/--black/greys/badges) inverteren al onder [data-theme="dark"] in variables.css, dus de semantische laag volgt automatisch. De elevation-waarden zijn bewust identiek aan vandaag (hardcoded schaduwen veranderden nooit mee met dark mode); de glass-skin definieert zijn eigen dark-varianten in skin-glass.css. */