/* Console tokens for the dashboard only. Every color rule is keyed on
   [data-surface="app"], so this file does nothing on the marketing site.
   @font-face cannot be scoped; the site does not link this file.
   Primitives (--c-*) are the only hex. */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-console-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}
/* hhea of the shipped 400 file: unitsPerEm 1000, ascent 1025, descent -275, lineGap 0.
   Average advance is 600/1000, within 0.4% of DejaVu Sans Mono and Liberation Mono. */
@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"), local("Liberation Mono");
  size-adjust: 100%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

/* console:light */
:root[data-surface="app"] {
  --c-ground: #f4f4f2;
  --c-card: #ffffff;
  --c-raised: #ebebe8;
  --c-border: #cfcfca;
  --c-rule: #e2e2de;
  --c-control: #7c7e83;
  --c-ink: #17181a;
  --c-muted: #4f5359;
  --c-faint: #5f636a;
  --c-ok: #0b6b40;
  --c-ok-wash: #dcf3e7;
  --c-ok-fill: #14915a;
  --c-warn: #8a5300;
  --c-warn-wash: #f8ebd3;
  --c-bad: #b3243a;
  --c-bad-wash: #f9e1e5;
  --c-sel: #e4ece8;
  --c-on-ink: #ffffff;
  --c-focus: #14915a;
  --c-code-c: #62666d;

  --font-ui: var(--font-mono);
  --font-prose: var(--font-sans);
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, monospace;
  --row: 26px;
  --row-head: 24px;
  --bar: 40px;
  --status-h: 24px;
  --side: 196px;
  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 12.5px;
  --t-lg: 15px;

  --ground: var(--c-ground);
  --card: var(--c-card);
  --raised: var(--c-raised);
  --border: var(--c-border);
  --rule: var(--c-rule);
  --control: var(--c-control);
  --ink: var(--c-ink);
  --muted: var(--c-muted);
  --faint: var(--c-faint);
  --ok: var(--c-ok);
  --ok-wash: var(--c-ok-wash);
  --ok-fill: var(--c-ok-fill);
  --warn: var(--c-warn);
  --warn-wash: var(--c-warn-wash);
  --bad: var(--c-bad);
  --bad-wash: var(--c-bad-wash);
  --sel: var(--c-sel);
  --on-ink: var(--c-on-ink);
  --focus-color: var(--c-focus);
  --code-k: var(--ink);
  --code-s: var(--ok);
  --code-c: var(--c-code-c);
  --code-n: var(--warn);
  --accent: var(--bad);
  --accent-wash: var(--bad-wash);
  --mint: var(--focus-color);
  --on-mint: var(--on-ink);
  --strong: var(--ink);

  background: var(--ground);
  color: var(--ink);
  color-scheme: light;
}

/* console:dark */
:root[data-surface="app"][data-theme="dark"] {
  --c-ground: #0c0d0f;
  --c-card: #111317;
  --c-raised: #181b20;
  --c-border: #2a2e35;
  --c-rule: #1d2026;
  --c-control: #6a707a;
  --c-ink: #e4e6e9;
  --c-muted: #a3a8b0;
  --c-faint: #8a909a;
  --c-ok: #8ff0bd;
  --c-ok-wash: #11271d;
  --c-ok-fill: #8ff0bd;
  --c-warn: #f2c06b;
  --c-warn-wash: #2a2213;
  --c-bad: #ff8f9c;
  --c-bad-wash: #2d1519;
  --c-sel: #1a2a23;
  --c-on-ink: #0c0d0f;
  --c-focus: #a1ffcb;
  --c-code-c: #878d97;
  --c-code-s: #a1ffcb;

  --ground: var(--c-ground);
  --card: var(--c-card);
  --raised: var(--c-raised);
  --border: var(--c-border);
  --rule: var(--c-rule);
  --control: var(--c-control);
  --ink: var(--c-ink);
  --muted: var(--c-muted);
  --faint: var(--c-faint);
  --ok: var(--c-ok);
  --ok-wash: var(--c-ok-wash);
  --ok-fill: var(--c-ok-fill);
  --warn: var(--c-warn);
  --warn-wash: var(--c-warn-wash);
  --bad: var(--c-bad);
  --bad-wash: var(--c-bad-wash);
  --sel: var(--c-sel);
  --on-ink: var(--c-on-ink);
  --focus-color: var(--c-focus);
  --code-s: var(--c-code-s);
  --code-c: var(--c-code-c);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  /* console:os-dark */
  :root[data-surface="app"]:not([data-theme]) {
    --c-ground: #0c0d0f;
    --c-card: #111317;
    --c-raised: #181b20;
    --c-border: #2a2e35;
    --c-rule: #1d2026;
    --c-control: #6a707a;
    --c-ink: #e4e6e9;
    --c-muted: #a3a8b0;
    --c-faint: #8a909a;
    --c-ok: #8ff0bd;
    --c-ok-wash: #11271d;
    --c-ok-fill: #8ff0bd;
    --c-warn: #f2c06b;
    --c-warn-wash: #2a2213;
    --c-bad: #ff8f9c;
    --c-bad-wash: #2d1519;
    --c-sel: #1a2a23;
    --c-on-ink: #0c0d0f;
    --c-focus: #a1ffcb;
    --c-code-c: #878d97;
    --c-code-s: #a1ffcb;

    --ground: var(--c-ground);
    --card: var(--c-card);
    --raised: var(--c-raised);
    --border: var(--c-border);
    --rule: var(--c-rule);
    --control: var(--c-control);
    --ink: var(--c-ink);
    --muted: var(--c-muted);
    --faint: var(--c-faint);
    --ok: var(--c-ok);
    --ok-wash: var(--c-ok-wash);
    --ok-fill: var(--c-ok-fill);
    --warn: var(--c-warn);
    --warn-wash: var(--c-warn-wash);
    --bad: var(--c-bad);
    --bad-wash: var(--c-bad-wash);
    --sel: var(--c-sel);
    --on-ink: var(--c-on-ink);
    --focus-color: var(--c-focus);
    --code-s: var(--c-code-s);
    --code-c: var(--c-code-c);

    color-scheme: dark;
  }
}

@media (max-width: 1279px) {
  :root[data-surface="app"] {
    --side: 168px;
  }
}