/* Device Logs — the console's skin: its values (colors, fonts, the type scale, radii, shadows) as tokens in :root
 * and again for html[data-theme="dark"], beside the font faces. Components and dimensions are structure.css's, which
 * spends these tokens and loads first, so the values here win.
 */

/* Self-hosted Ubuntu throughout the console. Its license ships in /fonts. */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Ubuntu-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Ubuntu-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Ubuntu-Bold.woff2") format("woff2");
}
:root {
  color-scheme: light;

  --bg: #f5f6f8;
  --bg-hover: #f2f5f9;
  --surface: #ffffff;
  --surface-2: #f2f5f9;
  --ink: #293445;
  --muted: #626f7e;
  --faint: #b9bfc7;
  --line: #d2d9e2;
  --line-strong: #b8c7d8;

  --accent: #2165b3;
  --accent-hover: #1b5599;
  --accent-active: #174881;
  --accent-disabled: #9dc2fb;
  --accent-soft: #e9f1fc;
  --on-accent: #ffffff;

  --ok: #32c465;
  --ok-deep: #197a3d;
  --ok-soft: #e2f7e9;
  --warn: #f0a12e;
  --warn-deep: #9a6200;
  --warn-soft: #fdf1d9;
  --down: #e2504f;
  --down-deep: #b3383f;
  --down-soft: #fceaec;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow-raise: 0 1px 2px rgba(20, 28, 40, 0.1);
  --shadow-hover: 0 12px 32px rgba(23, 33, 46, 0.12), 0 2px 8px rgba(23, 33, 46, 0.08);
  --focus-ring: rgba(33, 101, 179, 0.2);

  --font: "Ubuntu", -apple-system, "Segoe UI", sans-serif;
  --font-nav: var(--font);
  --type-label: 400 14px/21px var(--font);
  --type-caption: 400 14px/21px var(--font);
  --type-body: 400 15px/23px var(--font);
  --type-heading: 500 16px/24px var(--font);
  --type-title: 500 24px/32px var(--font);
  --type-btn: 400 15px/23px var(--font);
}

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

  --bg: #18222d;
  --bg-hover: #2b3b4d;
  --surface: #23303e;
  --surface-2: #1c2937;
  --ink: #e8eff7;
  --muted: #b4c2d1;
  --faint: #5f666f;
  --line: #475b6e;
  --line-strong: #60768c;
  /* On dark, interaction states go lighter, not darker. */
  --accent: #a0cdff;
  --accent-hover: #bedcff;
  --accent-active: #bedcff;
  --accent-disabled: #27437c;
  --accent-soft: #304963;
  --on-accent: #18222d;
  --ok-soft: #123722;
  --ok-deep: #62d98a;
  --warn-soft: #3a2e11;
  --warn-deep: #f6c76b;
  --down-soft: #3c191d;
  --down-deep: #ff858a;
  --shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}