/* ==========================================================================
   Nexa Portals — design-tokens
   Basis: merkblauw #0074FF uit het logo, aangevuld met een lichtere en
   donkerdere reeks, een navy voor donkere secties en koele lichtgrijzen
   voor premium, rustige achtergronden. Gebruik in eigen CSS:
   color: var(--nexa-500);  background: var(--nexa-canvas);
   ========================================================================== */
:root {
	/* Merkblauw, van licht naar donker */
	--nexa-50:  #EEF5FF;
	--nexa-100: #D6E8FF;
	--nexa-200: #ADD0FF;
	--nexa-300: #7AB3FF;
	--nexa-400: #3D92FF;
	--nexa-500: #0074FF;   /* brand */
	--nexa-600: #005FD6;
	--nexa-700: #004AAD;
	--nexa-800: #0A3680;
	--nexa-900: #0B1C3D;   /* navy, donkere secties */
	--nexa-950: #071430;

	/* Semantisch */
	--nexa-accent:        var(--nexa-500);
	--nexa-accent-hover:  var(--nexa-600);
	--nexa-accent-soft:   var(--nexa-50);
	--nexa-dark:          var(--nexa-900);
	--nexa-dark-2:        #0E2249;
	--nexa-dark-3:        #143060;

	/* Tekst */
	--nexa-ink:           #1B1B1B;
	--nexa-ink-2:         #5B6B85;
	--nexa-ink-3:         #7C8DB0;
	--nexa-on-dark:       #FFFFFF;
	--nexa-on-dark-2:     #A9B8D6;

	/* Oppervlakken */
	--nexa-white:         #FFFFFF;
	--nexa-canvas:        #F5F7FB;
	--nexa-subtle:        #EEF2F8;
	--nexa-border:        #D6DEEB;
	--nexa-border-dark:   rgba(255,255,255,.12);

	/* Status */
	--nexa-success:       #16A34A;
	--nexa-error:         #E5484D;
	--nexa-warning:       #F59E0B;

	/* Verlopen & glow */
	--nexa-gradient:      linear-gradient(135deg, #0074FF 0%, #005FD6 100%);
	--nexa-gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #F5F7FB 100%);
	--nexa-gradient-dark: linear-gradient(160deg, #0E2249 0%, #071430 100%);
	--nexa-glow:          0 18px 50px -18px rgba(0,116,255,.45);

	/* Vorm */
	--nexa-radius-sm: 10px;
	--nexa-radius:    16px;
	--nexa-radius-lg: 24px;
	--nexa-radius-xl: 32px;
	--nexa-shadow-sm: 0 1px 2px rgba(11,28,61,.06), 0 1px 3px rgba(11,28,61,.04);
	--nexa-shadow:    0 10px 30px -12px rgba(11,28,61,.18);
	--nexa-shadow-lg: 0 30px 60px -20px rgba(11,28,61,.28);

	/* Typografie: Satoshi voor lopende tekst, Elms Sans (bold) voor koppen */
	--nexa-font:         'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--nexa-font-heading: 'Elms Sans', 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--nexa-heading-weight: 700;
}

/* Koppen binnen Nexa-widgets en de case-detailpagina krijgen standaard Elms Sans Bold. */
[class*="nexa-"] h1, [class*="nexa-"] h2, [class*="nexa-"] h3, [class*="nexa-"] h4,
.nexa-heading, .nexa-title {
	font-family: var(--nexa-font-heading);
	font-weight: var(--nexa-heading-weight);
}