/** * Design tokens – Noodopvang Borne * ----------------------------------------------------------------------- * DOMEINKLEUR = waar je bent (--accent per data-domain) * STATUSKLEUR = wat er speelt (--status-* / --gauge-*) * NAVY + GOUD = de schil * * --status-* en --gauge-*: niet wijzigen (kaart/legenda/350-meter). */ :root { /* ---- Borne-identiteit: marine + heraldisch goud (de schil) ---------- */ --navy: #101d38; --navy-2: #0c1730; --navy-line: rgba(255, 255, 255, 0.10); --navy-soft: rgba(255, 255, 255, 0.62); --navy-dim: rgba(255, 255, 255, 0.40); --gold: #c89b3c; --gold-bright: #e3bd5e; --gold-soft: #ece0c2; /* ---- Neutrale basis (gedeeld over alle domeinen) -------------------- */ --canvas: #e9eaee; --surface: #ffffff; --surface-2: #f6f7f9; --line: #e3e6ec; --line-2: #eef0f4; --ink: #161d2e; --ink-2: #3b465e; --text-muted: #6b7488; /* ---- Typografie (3 rollen) ----------------------------------------- */ --font-display: "Archivo", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* ---- Domein-accent — default = home (marine) ----------------------- */ --accent: #1c2f57; --accent-soft: #e7ebf3; --accent-ink: #101d38; --primary-rgb: 28, 47, 87; /* ---- Aliassen (bestaande componenten) ------------------------------ */ --primary: var(--accent); --primary-dark: var(--accent-ink); --gradient-primary: linear-gradient(135deg, #eef0f4 0%, #e9eaee 100%); --text: var(--ink); --text-subtle: var(--text-muted); --border: var(--line); --border-light: var(--line-2); --surface-elevated: var(--surface); /* ---- Vorm & schaduw ------------------------------------------------ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1); --shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.15); --shadow-primary: 0 8px 25px rgba(var(--primary-rgb), 0.3); /* Referentie-accenten (hub-tegels op home; zelfde waarden als data-domain) */ --domain-form-accent: #564fd6; --domain-form-accent-soft: #ecebff; --domain-form-accent-ink: #332d96; --domain-bev-accent: #b15309; --domain-bev-accent-soft: #fbefdc; --domain-bev-accent-ink: #7c3a06; --domain-beh-accent: #0e7c66; --domain-beh-accent-soft: #ddefe9; --domain-beh-accent-ink: #0a4e40; /* Plattegrond statuskleuren (functioneel – niet wijzigen) */ --status-bestaand: #0057b7; --status-nieuw: #1e8449; --status-sh: #6c3483; --status-iv: #d35400; --status-vrij: #157a42; --status-vrij-map: #378add; --status-vrij-map-lg: #ef9f27; --status-rcvs: #00a896; --status-gereed: #27ae60; --status-niet-gereed: #e74c3c; --status-nb: #9e9e9e; /* Capacity gauge */ --gauge-ok: #27ae60; --gauge-warn: #e67e22; --gauge-full: #c0392b; } /* Domein-thema's — zet data-domain op */ [data-domain="home"] { --accent: #1c2f57; --accent-soft: #e7ebf3; --accent-ink: #101d38; --primary-rgb: 28, 47, 87; } [data-domain="form"] { --accent: #564fd6; --accent-soft: #ecebff; --accent-ink: #332d96; --primary-rgb: 86, 79, 214; } [data-domain="bev"] { --accent: #b15309; --accent-soft: #fbefdc; --accent-ink: #7c3a06; --primary-rgb: 177, 83, 9; } [data-domain="beh"] { --accent: #0e7c66; --accent-soft: #ddefe9; --accent-ink: #0a4e40; --primary-rgb: 14, 124, 102; }