/* Device Logs — default skin (see docs/ui-styleguide.md).
 *
 * The skin contract: every skins/ui-<name>.css defines all the tokens below in
 * :root and ships an html[data-theme="dark"] block (a single-look skin repeats
 * the same values there). Dimensions belong to the structure sheets, never here,
 * so any skin renders on any surface. A skin may add tokens beyond the contract;
 * the surfaces that do not know them ignore them.
 *
 * test/views/skin_conformance_test.rb enforces this shape.
 */

/* Nebula Sans (nebulasans.com, SIL OFL - a Source Sans continuation), static
   weights, self-hosted so a page renders identically with no third party.
   License ships beside the files: /fonts/NebulaSans-LICENSE.txt. */
@font-face {
  font-family: "Nebula Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/NebulaSans-Book.woff2") format("woff2");
}
@font-face {
  font-family: "Nebula Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/NebulaSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Nebula Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/NebulaSans-Semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Nebula Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/NebulaSans-Bold.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --bg: #f5f6f8;
  --bg-hover: #f3f5f7;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --ink: #212327;
  --muted: #7a828c;
  --faint: #b9bfc7;
  --line: #e5e7ea;
  --line-strong: #d2d6db;

  --accent: #0a66f5;
  --accent-hover: #0857d6;
  --accent-active: #0748b3;
  --accent-disabled: #9dc2fb;
  --accent-soft: #e9f1fe;

  --ok: #32c465;
  --ok-deep: #1d8a43;
  --ok-soft: #e2f7e9;
  --warn: #f0a12e;
  --warn-deep: #9a6200;
  --warn-soft: #fdf1d9;
  --info: #0a66f5;
  --down: #e2504f;
  --down-deep: #b3383f;
  --down-soft: #fceaec;
  --high: #f97316;
  --purple: #9c6ade;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow: none;
  --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(10, 102, 245, 0.2);

  --font: "Nebula Sans", Ubuntu, "Source Sans 3", -apple-system, "Segoe UI", Roboto, Cantarell, sans-serif;
  --type-label: 500 14px/20px var(--font);
  --type-caption: 400 15px/22px var(--font);
  --type-body: 400 16px/24px var(--font);
  --type-heading: 600 17px/24px var(--font);
  --type-title: 600 24px/32px var(--font);
  --type-display: 600 30px/38px var(--font);
  --type-btn: 500 16px/24px var(--font);
  --fs-base: 15px;
  --fs-small: 13px;
  --fs-title: 20px;
}

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

  --bg: #17191d;
  --bg-hover: #1e2126;
  --surface: #212429;
  --surface-2: #1c2530;
  --ink: #e8eaed;
  --muted: #9aa2ac;
  --faint: #5f666f;
  --line: #2b2f35;
  --line-strong: #3a3f46;
  /* On dark, interaction states go lighter, not darker. */
  --accent-hover: #3f83f7;
  --accent-active: #7fb0fa;
  --accent-disabled: #27437c;
  --accent-soft: #0e2b5c;
  --ok-soft: #123722;
  --warn-soft: #3a2e11;
  --down-soft: #3c191d;
  --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);
}