/* Gegenereerd uit tools/tokens.py. Niet met de hand bewerken.
 * Primitieven zijn feiten (het logo), semantische tokens zijn besluiten.
 * Componenten gebruiken alleen --color-*, --font-*, --space-* en --radius-*. */

:root {
  --esnu-blauw: #0273BA;
  --esnu-groen: #8EAC17;
  --esnu-inkt: #00121E;
  --esnu-wit: #FFFFFF;

  /* typografie: één humanistische grotesk, mobiel eerst, groot genoeg voor 65-plus */
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-size-body: 1.125rem;
  --font-size-small: 1rem;
  --font-size-meta: 0.875rem;
  --line-body: 1.55;
  --tracking-display: -0.02em;

  /* maat: 4px-raster */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-pill: 999px;
  --shadow-kaart: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px -12px rgb(0 0 0 / .18);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

[data-brand="echt-susteren"] {
  color-scheme: light;
  --color-surface: #FFFFFF;
  --color-surface-raised: #F2F8FC;
  --color-surface-sunken: #EBF1F5;
  --color-text: #00121E;
  --color-text-muted: #6B767C;
  --color-text-accent: #0273BA;
  --color-text-positive: #697F11;
  --color-border: #DBDEE0;
  --color-border-strong: #8E979C;
  --color-action-bg: #0273BA;
  --color-action-fg: #FFFFFF;
  --color-action-bg-hover: #02568B;
  --color-action-quiet-bg: #E1EEF7;
  --color-action-quiet-fg: #0273BA;
  --color-focus-ring: #0273BA;
  --color-graphic-accent: #8EAC17;
  --color-graphic-accent-soft: #EEF3DC;
  --color-date-bg: #0273BA;
  --color-date-fg: #FFFFFF;
  --color-selection: #E1EEF7;
  --color-feedback-danger-fg: #B3261E;
}

[data-brand="echt-susteren"][data-theme="dark"] {
  color-scheme: dark;
  --color-surface: #00121E;
  --color-surface-raised: #0F202C;
  --color-surface-sunken: #000E16;
  --color-text: #F0F7FB;
  --color-text-muted: #9EA5AA;
  --color-text-accent: #1E82C2;
  --color-text-positive: #8EAC17;
  --color-border: #293842;
  --color-border-strong: #5E6A71;
  --color-action-bg: #1E82C2;
  --color-action-fg: #00121E;
  --color-action-bg-hover: #5DA5D3;
  --color-action-quiet-bg: #002740;
  --color-action-quiet-fg: #1E82C2;
  --color-focus-ring: #1E82C2;
  --color-graphic-accent: #8EAC17;
  --color-graphic-accent-soft: #1F341C;
  --color-date-bg: #1E82C2;
  --color-date-fg: #00121E;
  --color-selection: #013455;
  --color-feedback-danger-fg: #C65C56;
}

[data-brand="echt-susteren"][data-contrast="hoog"]:not([data-theme="dark"]) {
  color-scheme: light;
  --color-surface: #FFFFFF;
  --color-surface-raised: #F2F8FC;
  --color-surface-sunken: #EBF1F5;
  --color-text: #00121E;
  --color-text-muted: #4A5156;
  --color-text-accent: #015082;
  --color-text-positive: #4E5F0D;
  --color-border: #939596;
  --color-border-strong: #4A5156;
  --color-action-bg: #015082;
  --color-action-fg: #FFFFFF;
  --color-action-bg-hover: #00121E;
  --color-action-quiet-bg: #E1EEF7;
  --color-action-quiet-fg: #015082;
  --color-focus-ring: #00121E;
  --color-graphic-accent: #4E5F0D;
  --color-graphic-accent-soft: #EEF3DC;
  --color-date-bg: #015082;
  --color-date-fg: #FFFFFF;
  --color-selection: #E1EEF7;
  --color-feedback-danger-fg: #AA241C;
}

[data-brand="echt-susteren"][data-theme="dark"][data-contrast="hoog"] {
  color-scheme: dark;
  --color-surface: #00121E;
  --color-surface-raised: #0F202C;
  --color-surface-sunken: #000E16;
  --color-text: #FFFFFF;
  --color-text-muted: #A3AAAE;
  --color-text-accent: #7BB6DB;
  --color-text-positive: #8EAC17;
  --color-border: #56626A;
  --color-border-strong: #A3AAAE;
  --color-action-bg: #7BB6DB;
  --color-action-fg: #00121E;
  --color-action-bg-hover: #FFFFFF;
  --color-action-quiet-bg: #002740;
  --color-action-quiet-fg: #7BB6DB;
  --color-focus-ring: #FFFFFF;
  --color-graphic-accent: #8EAC17;
  --color-graphic-accent-soft: #1F341C;
  --color-date-bg: #7BB6DB;
  --color-date-fg: #00121E;
  --color-selection: #013455;
  --color-feedback-danger-fg: #D68A86;
}