/* Heltech-huisstijl – design tokens.
   Kleuren gemeten uit het Heltech-logo (branding/heltech-logo-400.jpg).
   Pas huisstijlwijzigingen alleen hier aan. */
:root {
  /* merk */
  --ht-navy: #17234D;        /* "Hel" */
  --ht-antraciet: #3A3A3B;   /* "tech" */
  --ht-grijs: #9D9D9E;       /* "Engineering & Service" */
  --ht-lichtgrijs: #C4C5C7;  /* boog */
  --ht-oranje: #F29400;
  --ht-blauw: #2EAADD;
  --ht-groen: #009136;
  --ht-rood: #E3001B;

  --ht-font: "Segoe UI", "Myriad Pro", "Frutiger", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* rollen – licht */
  --ht-primary: var(--ht-navy);
  --ht-primary-tekst: #FFFFFF;
  --ht-accent: #1B87B5;          /* blauw, donkerder voor AA-contrast op wit */
  --ht-bg: #F3F4F7;
  --ht-surface: #FFFFFF;
  --ht-surface-2: #F7F8FA;
  --ht-rand: #E1E3E8;
  --ht-text: #1D2433;
  --ht-text-zacht: #5E6472;

  /* status (merkkleuren; tekstvarianten voldoen aan WCAG AA op wit) */
  --st-online: var(--ht-groen);
  --st-waarschuwing: var(--ht-oranje);
  --st-offline: var(--ht-rood);
  --st-onbekend: var(--ht-lichtgrijs);
  --st-online-tekst: #007A2E;
  --st-waarschuwing-tekst: #9A5B00;
  --st-offline-tekst: #C20017;
  --st-online-bg: #E3F4EA;
  --st-waarschuwing-bg: #FDF0DC;
  --st-offline-bg: #FCE3E6;
  --st-onbekend-bg: #EEEFF2;

  --ht-schaduw: 0 1px 2px rgba(23, 35, 77, .06), 0 2px 8px rgba(23, 35, 77, .06);
  --ht-radius: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ht-primary: #2EAADD;
    --ht-primary-tekst: #0B1020;
    --ht-accent: #5CC3EC;
    --ht-bg: #0D1324;
    --ht-surface: #151D33;
    --ht-surface-2: #1B2540;
    --ht-rand: #27314F;
    --ht-text: #E7EAF2;
    --ht-text-zacht: #A3AABD;
    --st-online-tekst: #3FCB72;
    --st-waarschuwing-tekst: #FFB340;
    --st-offline-tekst: #FF5A6B;
    --st-online-bg: rgba(0, 145, 54, .18);
    --st-waarschuwing-bg: rgba(242, 148, 0, .18);
    --st-offline-bg: rgba(227, 0, 27, .20);
    --st-onbekend-bg: rgba(196, 197, 199, .12);
    --st-onbekend: #59607A;
    --ht-schaduw: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ht-primary: #2EAADD;
  --ht-primary-tekst: #0B1020;
  --ht-accent: #5CC3EC;
  --ht-bg: #0D1324;
  --ht-surface: #151D33;
  --ht-surface-2: #1B2540;
  --ht-rand: #27314F;
  --ht-text: #E7EAF2;
  --ht-text-zacht: #A3AABD;
  --st-online-tekst: #3FCB72;
  --st-waarschuwing-tekst: #FFB340;
  --st-offline-tekst: #FF5A6B;
  --st-online-bg: rgba(0, 145, 54, .18);
  --st-waarschuwing-bg: rgba(242, 148, 0, .18);
  --st-offline-bg: rgba(227, 0, 27, .20);
  --st-onbekend-bg: rgba(196, 197, 199, .12);
  --st-onbekend: #59607A;
  --ht-schaduw: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}