/* LastPing design tokens for lastping.dev: the console's own names and
   values, so the marketing site and the console read as one product. The
   values here must equal the console's; change a colour there first.

   This is the only stylesheet that carries a raw colour for the new layout.
   ui.css uses these names and nothing else.

   Theme: redesigned pages are dark by default and carry data-theme="dark"
   in their HTML; the head script switches them to light before first paint
   when the visitor chose light. Older pages carry data-theme="light" and stay
   light. :root holds the light values; a page with no data-theme at all
   follows the visitor's system through the media query at the bottom. The
   two dark blocks are deliberately identical (plain CSS cannot give one block
   a conditional second selector); keep them byte-equal.

   Fonts: IBM Plex Sans and Mono, Latin subset, the console's exact files.
   Licence: SIL Open Font License 1.1, /fonts/OFL.txt. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

/* Metric-matched fallbacks, measured against these exact font files (the
   console uses the same numbers). They keep the swap from shifting the layout. */
@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Arial");
  size-adjust: 99.07%;
  ascent-override: 103.46%;
  descent-override: 27.76%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"), local("Liberation Mono");
  size-adjust: 99.98%;
  ascent-override: 102.52%;
  descent-override: 27.50%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  --font-sans: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 10px;

  --text-headline: 28px;
  --text-title: 22px;
  --text-section: 16px;
  --text-body: 14px;
  --text-meta: 13px;

  --bg: #ffffff;
  --bg-panel: #f3f5f8;
  --bg-raised: #e9edf2;
  --border: #d7dde5;
  --border-strong: #c3ccd7;
  --border-control: #77838f;
  --fg: #0e1116;
  --fg-muted: #5b6675;
  --fg-subtle: #6b7684;

  --accent: #0f766e;
  --accent-fg: #ffffff;

  --up: #157637;
  --late: #a74d08;
  --down: #cf2020;
  --paused: #5b6675;
  --waiting: #1b5fa8;

  --shadow-overlay: 0 20px 25px -5px rgb(14 17 22 / 0.18), 0 8px 10px -6px rgb(14 17 22 / 0.14);
}

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

  --bg: #0e1116;
  --bg-panel: #151a22;
  --bg-raised: #1a2029;
  --border: #232c38;
  --border-strong: #2f3a49;
  --border-control: #677384;
  --fg: #e8eef5;
  --fg-muted: #7e8b9a;
  --fg-subtle: #727f8e;

  --accent: #2dd4bf;
  --accent-fg: #062b28;

  --up: #39d98a;
  --late: #f2b544;
  --down: #f0616d;
  --paused: #7e8b9a;
  --waiting: #7fb2ff;

  --shadow-overlay: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #0e1116;
    --bg-panel: #151a22;
    --bg-raised: #1a2029;
    --border: #232c38;
    --border-strong: #2f3a49;
    --border-control: #677384;
    --fg: #e8eef5;
    --fg-muted: #7e8b9a;
    --fg-subtle: #727f8e;

    --accent: #2dd4bf;
    --accent-fg: #062b28;

    --up: #39d98a;
    --late: #f2b544;
    --down: #f0616d;
    --paused: #7e8b9a;
    --waiting: #7fb2ff;

    --shadow-overlay: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.45);
  }
}