/* IoT Message design tokens: the Dispatch system.
 *
 * The source of truth is docs/design-system.md. Change a value there first,
 * then here. Every other stylesheet uses these properties and no literal
 * colors, sizes, or radii.
 *
 * Light values sit on :root. Dark values apply under [data-theme="dark"],
 * which the console's head script sets before first paint. Public pages never
 * set it, so they stay light.
 */

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4Variable-Roman.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4Variable-Italic.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  --iot-ground: #FAF9F7;
  --iot-surface: #F0EEE9;
  --iot-raised: #FDFCFB;
  --iot-border: #E3E0DA;
  --iot-border-strong: #8A857F;
  --iot-text: #17191C;
  --iot-text-secondary: #4A4844;
  --iot-text-muted: #6D6963;
  --iot-text-accent: #173DA8;
  --iot-accent: #1B4FD8;
  --iot-accent-hover: #173DA8;
  --iot-accent-pressed: #152E76;
  --iot-accent-fg: #FFFFFF;
  --iot-accent-outline: #4A73EC;

  --iot-state-online: #0F7A4A;
  --iot-state-offline: #7F7A74;
  --iot-state-degraded: #96631C;
  --iot-state-error: #B8103F;
  --iot-state-retrying: #5B3FCF;
  --iot-state-queued: #4A73EC;
  --iot-state-acked: #1B4FD8;
  --iot-state-muted: #8A857F;
  --iot-state-error-bg: #FDF0F3;

  --iot-space-1: 4px;
  --iot-space-2: 8px;
  --iot-space-3: 12px;
  --iot-space-4: 16px;
  --iot-space-5: 24px;
  --iot-space-6: 32px;
  --iot-space-7: 48px;

  --iot-radius-control: 2px;
  --iot-radius-panel: 4px;

  --iot-font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --iot-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --iot-size-small: 13px;
  --iot-size-body: 15px;
  --iot-size-heading: 18px;
  --iot-size-title: 24px;

  --iot-touch: 44px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --iot-ground: #16171A;
  --iot-surface: #1F2125;
  --iot-raised: #2A2D32;
  --iot-border: #383B41;
  --iot-border-strong: #7D7872;
  --iot-text: #FAF9F7;
  --iot-text-secondary: #BCB7B0;
  --iot-text-muted: #A09A92;
  --iot-text-accent: #9DB4F8;
  --iot-accent: #7F9DF6;
  --iot-accent-hover: #B6C7FB;
  --iot-accent-pressed: #D9E2FD;
  --iot-accent-fg: #101E3D;
  --iot-accent-outline: #7F9DF6;

  --iot-state-online: #3FBF85;
  --iot-state-offline: #9E9890;
  --iot-state-degraded: #DFA63C;
  --iot-state-error: #FF5C7D;
  --iot-state-retrying: #A79BF2;
  --iot-state-queued: #B6C7FB;
  --iot-state-acked: #7F9DF6;
  --iot-state-muted: #7A756E;
  --iot-state-error-bg: #2A1620;
}

:focus-visible {
  outline: 2px solid var(--iot-accent);
  outline-offset: 2px;
}

/* ── State glyphs ────────────────────────────────────────────────────────
 * Rendered by templates/console/_state.html. The glyph carries the state
 * color; the word stays in a text color, because several state colors are
 * below 4.5:1 as text. */

.state {
  display: inline-flex;
  align-items: center;
  gap: var(--iot-space-2);
  color: var(--iot-text-secondary);
  white-space: nowrap;
}
.state .glyph { flex: none; }
.state-online .glyph { color: var(--iot-state-online); }
.state-offline .glyph { color: var(--iot-state-offline); }
.state-degraded .glyph { color: var(--iot-state-degraded); }
.state-error .glyph { color: var(--iot-state-error); }
.state-retrying .glyph { color: var(--iot-state-retrying); }
.state-queued .glyph { color: var(--iot-state-queued); }
.state-acked .glyph { color: var(--iot-state-acked); }
.state-muted .glyph { color: var(--iot-state-muted); }