/* AmzOne Hub design tokens. The single source of truth for color and type: a brand change is an edit here.
   Brand values sampled from assets/brand/logoamzone.jpeg by scripts/brand_assets.py (see assets/brand/BRAND.md). */
:root {
  color-scheme: dark;
  /* surfaces */
  --bg: #000;
  --surface: #0a0a0a;
  --surface-2: #2a2b36;              /* charcoal of the logo disk */
  --surface-2-hover: color-mix(in srgb, var(--surface-2) 40%, transparent);

  /* text */
  --text: #fff;
  --grey-1: #b5b5b5;
  --grey-2: #8c8c8c;
  --dim: #5e5e5e;

  /* brand */
  --brand: #07d1c3;                  /* teal of the ring and the "amz" letters */
  --brand-strong: color-mix(in srgb, var(--brand) 88%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);
  --brand-line: color-mix(in srgb, var(--brand) 35%, transparent);

  /* lines */
  --line: #1f1f1f;
  --line-strong: #333;

  /* states */
  --ok: var(--brand);
  --warn: #d9a441;
  --danger: #d9534f;
  --header-bg: color-mix(in srgb, var(--bg) 85%, transparent);

  /* print: reports are printed on white paper, browsers drop dark backgrounds */
  --print-bg: #fff;
  --print-text: #111;
  --print-grey: #555;
  --print-line: #cfcfcf;

  /* type */
  --font-display: "Outfit", "Geist", sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* spacing scale */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;

  /* shape */
  --cut: 14px;                       /* diagonal cut on the primary button, bottom-right */

  /* white marks (Forge wordmark) stay as drawn on dark */
  --mark-filter: none;
}

/* Off-white light theme (toggle in the header, see static/js/theme.js). Same structure, same tokens.
   Contrast checked against --bg: text 16.6:1, grey-1 9.5:1, grey-2 5.9:1, brand 5.9:1 (5.0:1 on --brand-soft),
   warn 5.5:1, danger 6.1:1. The sampled logo teal (#07d1c3) is only 1.7:1 on off-white, so text and fills use
   a deep teal of the same hue; the logo artwork itself is unchanged. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f9f6f0;                     /* the Forge Operations site off-white */
  --surface: #fdfbf7;
  --surface-2: #e9e7e1;
  --text: #16171b;
  --grey-1: #3f4148;
  --grey-2: #5c5f66;
  --dim: #8a8c91;
  --brand: #006b65;
  --brand-strong: color-mix(in srgb, var(--brand) 85%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --line: #e2dfd7;
  --line-strong: #c9c5bb;
  --warn: #8a5a00;
  --danger: #b3261e;
  --mark-filter: invert(1);
}