:root{
  /* ---- Brand reds (sampled from logo_rot.png, hintergrund.png, device screen) ---- */
  --red-900:#500d12;
  --red-800:#7a0a0d;
  --red-700:#a30006;
  --red-600:#c00000;   /* PRIMARY. The FX-1 wordmark red. */
  --red-500:#e51a21;   /* LED-wall red, header-bar red */
  --red-400:#ee5442;   /* splash-screen coral */
  --red-300:#f68b7c;
  --red-100:#fbdedb;
  --red-50:#fdf2f1;

  /* ---- Neutrals: brushed stainless + black bezel ---- */
  --black:#000000;
  --bezel-900:#15111f;  /* glass bezel, sampled */
  --ink-900:#141414;
  --ink-700:#3a3a3a;
  --ink-500:#6b6b6b;
  --ink-400:#8f8f8f;
  --ink-300:#c2c2c2;
  --ink-200:#dedede;
  --ink-100:#eeeeee;
  --ink-50:#f6f6f6;
  --white:#ffffff;

  /* Brushed-steel family, taken from the enclosure photography */
  --steel-700:#7d7a72;
  --steel-500:#a9a79f;
  --steel-300:#c9c7c0;
  --steel-100:#e6e4de;

  /* ---- Royal blue: the brand's complement to #C00000 ----
     Equal-weight counterpart on the opposite side of the wheel. Used as a
     secondary accent for informational chrome, charts, links in dark contexts
     and editorial contrast — never alongside red at equal area. */
  --blue-900:#0b1c47;
  --blue-800:#12295f;
  --blue-700:#183582;
  --blue-600:#1e40a0;   /* ROYAL. The complement pair to --red-600. */
  --blue-500:#2a54c4;
  --blue-400:#4f77dd;
  --blue-300:#8aa6ec;
  --blue-100:#dde5fa;
  --blue-50:#f1f5fe;

  /* ---- Semantic status (from the device status line + LED) ---- */
  --green-500:#22b14c;  /* "OK", ready LED */
  --green-100:#e2f5e8;
  --amber-500:#e0a800;  /* running / warning */
  --amber-100:#fdf3d6;
  --danger-500:#c00000; /* "nicht verbunden" — same red as brand */
  --danger-100:#fbdedb;
  --info-500:var(--blue-600);
  --info-100:var(--blue-100);

  /* ---- Semantic aliases ---- */
  --brand:var(--red-600);
  --brand-strong:var(--red-700);
  --brand-bright:var(--red-500);
  --accent:var(--blue-600);
  --accent-strong:var(--blue-800);
  --accent-soft:var(--blue-100);

  --text-body:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-inverse:var(--white);
  --text-brand:var(--red-600);
  --text-accent:var(--blue-700);
  --text-link:var(--red-600);
  --text-link-hover:var(--red-800);

  --surface-page:var(--ink-50);
  --surface-card:var(--white);
  --surface-sunken:var(--ink-100);
  --surface-inverse:var(--ink-900);
  --surface-accent:var(--blue-600);
  --surface-accent-soft:var(--blue-50);
  --surface-brand:var(--red-600);
  --surface-screen:var(--white);      /* the touch panel background */
  --surface-row-alt:#f4f6f8;          /* zebra row on the device list */

  /* ---- FX-1 firmware framebuffer ----
     Sampled pixel-for-pixel from VNC captures of the running device
     (assets/reference/). The panel is 274x479 px. These are literal
     framebuffer values, NOT brand colours — do not "correct" them toward
     --red-600 and do not reuse them off-device. */
  --fb-red:#9c1919;                   /* header bar + page field */
  --fb-red-dim:#944a42;               /* the same red behind a modal scrim */
  --fb-row:#adadad;                   /* list row */
  --fb-row-dim:#949c94;               /* list row behind a modal scrim */
  --fb-panel:#ffffff;
  --fb-button:#e6efe6;                /* pale green dialog button */
  --fb-button-edge:#d6dede;
  --fb-statusbar:#c5cece;
  --fb-scroll:#cecece;
  --fb-led:#3aad08;                   /* status-bar glyph green */
  --fb-ink:#000000;

  --border-hairline:var(--ink-200);
  --border-strong:var(--ink-300);
  --border-brand:var(--red-600);
  --border-accent:var(--blue-600);
  --border-field:var(--ink-400);

  --status-ok:var(--green-500);
  --status-busy:var(--amber-500);
  --status-error:var(--danger-500);

  --focus-ring:var(--red-500);
}