@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url('../../vendor/fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations');
}

html,
button,
input,
select,
textarea {
  font-family: 'DM Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

code,
kbd,
pre {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, 'Cascadia Mono', monospace;
}

/**
 * The Falcon console sets its own face: Calibre, with Monaco for monospace. Calibre is licensed
 * and not ours to redistribute, so it is named first and used where the viewer has it, with a
 * fallback behind it. The metrics below — 16px base, five styles, 24px leading — hold either way.
 */
html[data-app='falcon'],
html[data-app='falcon'] button,
html[data-app='falcon'] input,
html[data-app='falcon'] select,
html[data-app='falcon'] textarea {
  font-family: Calibre, -apple-system, 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
}

html[data-app='falcon'] code,
html[data-app='falcon'] kbd,
html[data-app='falcon'] pre {
  font-family: Monaco, 'SF Mono', SFMono-Regular, ui-monospace, monospace;
}

/* The console's type scale, under its own names. Letter-spacing is normal everywhere. */
[data-app='falcon'] .type-md { font-size: 16px; font-weight: 400; line-height: 24px; }
[data-app='falcon'] .type-md-tight { font-size: 16px; font-weight: 400; line-height: 16px; }
[data-app='falcon'] .type-md-medium { font-size: 16px; font-weight: 500; line-height: 24px; }
[data-app='falcon'] .type-lg { font-size: 20px; font-weight: 500; line-height: 24px; }
[data-app='falcon'] .type-xl { font-size: 24px; font-weight: 500; line-height: 32px; }
[data-app='falcon'] .type-xs { font-size: 12px; font-weight: 400; line-height: 16px; }
[data-app='falcon'] .type-xs-mono {
  font-family: Monaco, 'SF Mono', SFMono-Regular, ui-monospace, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

body {
  margin: 0;
  background-color: var(--background-canvas);
  color: var(--foreground);
}

button:not(:disabled) {
  cursor: pointer;
}

/* Status colors are token-driven, so they re-skin with the host app. */
.text-status-negative {
  color: var(--negative);
}
.text-status-attention {
  color: var(--attention);
}
.text-status-warning {
  color: var(--warning);
}
.text-status-positive {
  color: var(--positive);
}
.text-status-info {
  color: var(--info);
}
.text-status-pending {
  color: var(--pending);
}
.bg-status-negative-subtle {
  background-color: var(--negative-subtle);
}
.bg-status-attention-subtle {
  background-color: var(--attention-subtle);
}
.bg-status-warning-subtle {
  background-color: var(--warning-subtle);
}
.bg-status-positive-subtle {
  background-color: var(--positive-subtle);
}
.bg-status-info-subtle {
  background-color: var(--info-subtle);
}
.bg-status-pending-subtle {
  background-color: var(--pending-subtle);
}

/**
 * CrowdStrike Falcon skin, matched to the live console: dark chrome (top nav, tabs,
 * filter bars) over a light content surface where every table cell is its own card.
 * The two sub-apps share one component layer and differ only in token values.
 */
[data-app='falcon'] {
  /**
   * Values lifted from the console's own custom properties. Each of theirs carries a dark and a
   * light value; the chrome takes the dark one, the content surface the light one. Their token
   * name is kept in a comment so any value here can be traced back.
   */
  --radius: 0.25rem;
  --chrome: #212121;          /* --mezzanine */
  --chrome-2: #1a1a1a;        /* --surface-inner, dark */
  --chrome-foreground: #e2e2e4; /* --titles-and-attributes, dark */
  --chrome-muted: #a6acb0;    /* --body-and-labels, dark */
  --chip: #454545;
  --accent-line: #039eba;     /* --focus */
  --header-strip: #ededed;
  --panel-band: #ffffff;      /* --surface-base, light */
  --control: #e0e0e0;
  --cta: #036678;             /* --primary-idle, light */
  --cta-hover: #168093;       /* --primary-hover, light */
  --cta-foreground: #ffffff;
  --background: #ffffff;
  --background-canvas: #ffffff;  /* the rows sit on --surface-base, not the header strip */
  --background-strong: #e0e0e0;
  --card: #ffffff;            /* --surface-base, light */
  --popover: #ffffff;
  --foreground: #3d3d3d;      /* --titles-and-attributes, light */
  --muted: #ededed;
  --muted-foreground: #767676; /* --body-and-labels, light */
  --secondary: #ededed;
  --accent: #e0e0e0;
  --primary: #212121;
  --primary-foreground: #ffffff;
  --border: #d9d9d9;          /* --lines-dark, light */
  --border-strong: #a6acb0;
  --input: #d9d9d9;
  --ring: #039eba;
  --link: #036678;            /* --primary-idle, light */
  /* Severity, their scale: low is green and informational is blue, not the reverse. */
  --negative: #e9181f;        /* --critical */
  --negative-subtle: #fdece9;
  --attention: #f77d40;       /* --high */
  --attention-subtle: #fdf0e6;
  --warning: #edb000;         /* --medium */
  --warning-subtle: #fdf6e3;
  --positive: #649f64;        /* --low */
  --positive-subtle: #e9f6ee;
  --info: #5082d2;            /* --informational */
  --info-subtle: #eaf1fb;
  --insight: #77798f;
  --insight-subtle: #f0ecfb;
  --pending: #767676;
  --pending-subtle: #ededed;
  --row-hover: rgba(0, 0, 0, 0.05);
}

/* The list row's hover wash and the outline on the row whose panel is open. */
[data-app='falcon'] .falcon-row:hover {
  background-color: var(--row-hover);
}
[data-app='falcon'] .falcon-row-selected > div {
  outline: 1px solid var(--border-strong);
}

/* The product's page width: content is centred and capped, never full-bleed. */
.page-container {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-bottom: 0.5rem;
}

/* The data-flow graph's own scrollbar, per the product: a hairline under the scrolling band. */
.graph-scroll::-webkit-scrollbar {
  height: 4px;
}
.graph-scroll::-webkit-scrollbar-thumb {
  background: var(--muted-foreground);
  border-radius: 999px;
}
.graph-scroll::-webkit-scrollbar-track {
  background: var(--accent);
  border-radius: 999px;
}

/* The solid halves of the product's status utilities; the subtle ones are above. */
.bg-status-negative {
  background-color: var(--negative);
}
.bg-status-attention {
  background-color: var(--attention);
}
.bg-status-warning {
  background-color: var(--warning);
}
.bg-status-positive {
  background-color: var(--positive);
}
.bg-status-info {
  background-color: var(--info);
}
.bg-status-insight {
  background-color: var(--insight);
}
.bg-status-pending {
  background-color: var(--pending);
}