/* G3 brand override stylesheet — layered after /assets/carbon.css.
 * Theme tokens are scoped to Carbon's own theme-zone selectors
 * (.cds--white, .cds--g100), never :root — Carbon's compiled CSS defines
 * every theme custom property on those selectors, so a :root override
 * would silently change nothing (05-UI-SPEC.md Color section). */

/* Self-hosted IBM Plex, served from this app's own /assets/fonts/ route —
 * no request ever leaves this app for a font (T-05-11). */
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/plex-mono-400.woff2") format("woff2");
}

body {
  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.mono,
pre {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Color: Carbon blue removed, near-black/white in its place — verbatim
 * from 05-UI-SPEC.md's Color section. On-light tokens on .cds--white
 * (buttons/links/borders/focus that sit on the White zone's own
 * white/light-gray surfaces), on-dark tokens on .cds--g100 (the header
 * zone) — reusing Carbon's own neutral shades, never inventing new hex
 * values. */
.cds--white {
  --cds-border-interactive: #161616;
  --cds-focus: #161616;
  --cds-icon-interactive: #161616;
  --cds-link-inverse: #f4f4f4;
  --cds-link-inverse-hover: #ffffff;
  --cds-link-primary: #161616;
  --cds-link-primary-hover: #000000;
  --cds-link-secondary: #000000;
  --cds-button-primary: #161616;
  --cds-button-primary-hover: #000000;
  --cds-button-primary-active: #000000;
  --cds-button-tertiary: #161616;
  --cds-button-tertiary-hover: #000000;
  --cds-button-tertiary-active: #000000;
}
.cds--g100 {
  --cds-border-interactive: #f4f4f4;
  --cds-focus: #ffffff;
  --cds-focus-inverse: #ffffff;
  --cds-link-inverse: #f4f4f4;
  --cds-link-inverse-hover: #ffffff;
  --cds-link-primary: #f4f4f4;
  --cds-link-primary-hover: #ffffff;
  --cds-link-secondary: #f4f4f4;
  --cds-button-primary: #f4f4f4;
  --cds-button-primary-hover: #e0e0e0;
  --cds-button-primary-active: #c6c6c6;
  --cds-notification-action-tertiary-inverse: #f4f4f4;
  --cds-notification-action-tertiary-inverse-active: #e0e0e0;
}

/* Dark content zone (06.1-UI-SPEC.md Color) — verbatim from
 * 06.1-UI-SPEC.md:159-176, checker-approved. Two distinct treatments vs.
 * the light-zone recipe above: text/links sitting on the dark background
 * get a light value, but --cds-text-on-color is scoped here (fixed white
 * by Carbon's own primary-button rule everywhere else) so a light-filled
 * primary button gets correctly-contrasted dark text instead of invisible
 * white-on-light text — this zone, unlike g100, actually renders primary
 * CTAs. */
.cds--g90 {
  --cds-border-interactive: #f4f4f4;
  --cds-focus: #ffffff;
  --cds-focus-inverse: #ffffff;
  --cds-link-inverse: #f4f4f4;
  --cds-link-inverse-hover: #ffffff;
  --cds-link-primary: #f4f4f4;
  --cds-link-primary-hover: #ffffff;
  --cds-link-secondary: #f4f4f4;
  --cds-button-primary: #f4f4f4;
  --cds-button-primary-hover: #ffffff;
  --cds-button-primary-active: #e0e0e0;
  --cds-text-on-color: #161616;
  --cds-notification-action-tertiary-inverse: #f4f4f4;
  --cds-notification-action-tertiary-inverse-active: #e0e0e0;
}

/* G3 layout / typography / status utilities — Carbon has no equivalent
 * class for any of these (05-UI-SPEC.md Visual Hierarchy / Typography). */
.g3-main {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(3rem + var(--cds-spacing-09, 3rem)) var(--cds-spacing-05, 1rem) var(--cds-spacing-09, 3rem);
}
.g3-display {
  font-size: var(--cds-heading-04-font-size, 1.75rem);
  line-height: var(--cds-heading-04-line-height, 1.28572);
  font-weight: 600;
  overflow-wrap: anywhere;
  margin: 0 0 var(--cds-spacing-06, 1.5rem) 0;
}
.g3-heading {
  font-size: var(--cds-heading-03-font-size, 1.25rem);
  line-height: var(--cds-heading-03-line-height, 1.4);
  font-weight: 600;
  margin: 0 0 var(--cds-spacing-05, 1rem) 0;
}
.muted {
  color: var(--cds-text-secondary, #525252);
}
.nowrap {
  white-space: nowrap;
}
.g3-tabular {
  font-variant-numeric: tabular-nums;
}
.g3-live-log {
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--cds-layer-01, #f4f4f4);
  margin: var(--cds-spacing-03, 0.5rem) 0 0 0;
  padding: var(--cds-spacing-05, 1rem);
}

/* Long values (ids, SHAs, URLs) wrap inside their table cell instead of
 * forcing horizontal page scroll. */
.cds--data-table td,
.cds--data-table th {
  overflow-wrap: anywhere;
}

/* Phase 5 UI-Review Top Fix #2, closed here (06-UI-SPEC.md Spacing Scale):
 * consecutive tiles previously rendered visually merged with no gap. */
.cds--tile + .cds--tile {
  margin-top: var(--cds-spacing-07, 2rem);
}

/* Scoped wrap utility for the Telemetry tile's ingest URL and token cells
 * only (06-UI-SPEC.md UI Considerations T1 overflow) — never applied to
 * whole table cells, which already get the looser rule above. */
.g3-wrap-anywhere {
  overflow-wrap: anywhere;
}