/* ARGUS UI v2 design tokens (Phase 1). The ONLY file in the platform allowed to define
   colours or load fonts (enforced by ui_guard.py). Approved palette, CTO 24 Oct 2026;
   derived text shades approved 25 Oct 2026. Active only under <html data-ui=v2>.
   Fonts: Archivo, IBM Plex Sans, IBM Plex Mono (SIL Open Font License 1.1), self-hosted. */

@font-face { font-family: "Archivo"; src: url("archivo-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("archivo-cedi-wght.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; unicode-range: U+20B5; }
@font-face { font-family: "IBM Plex Sans"; src: url("plex-sans-latin-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Sans"; src: url("plex-sans-latin-600.woff2") format("woff2");
  font-weight: 500 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Sans"; src: url("plex-sans-cedi-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+20B5; }
@font-face { font-family: "IBM Plex Sans"; src: url("plex-sans-cedi-600.woff2") format("woff2");
  font-weight: 500 700; font-display: swap; unicode-range: U+20B5; }
@font-face { font-family: "IBM Plex Mono"; src: url("plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Mono"; src: url("plex-mono-cedi-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+20B5; }

html[data-ui="v2"] {
  /* approved palette (shared names: the tokens file owns them) */
  --navy: #0B1C23; --teal: #09969F; --teal-deep: #07646A; --teal-tint: #E3F4F2;
  --orange: #FF6B00; --sky: #2FAEE3; --page: #EEF1F0; --card: #FFFFFF; --border: #DCE2E0;
  --good: #3FD1A0; --good-deep: #1E9E6A; --warning: #F2B33D; --danger: #D64545;
  --c-muted: #6F8890;   /* palette "muted": icons and dividers only (3.75:1 as text) */

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --target: 44px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* semantic, light */
  --surface: var(--card); --surface-2: #F6F8F7; --text-2: #506268; --icon: var(--c-muted);
  --link: var(--teal-deep); --accent: var(--teal);
  --selected-bg: var(--teal-tint); --selected-fg: var(--teal-deep);
  --primary-bg: var(--teal-deep); --primary-fg: #FFFFFF;
  --cta-bg: var(--orange); --cta-fg: var(--navy);
  --good-fg: #167750; --warning-fg: #8E600A; --danger-fg: #C52B2B;
  --good-bg: #E2F7EF; --warning-bg: #FDF3DF; --danger-bg: #FBE7E7; --info-bg: #E3F3FB;
  --scrim: rgba(11, 28, 35, 0.55);
  --focus: 0 0 0 3px rgba(9, 150, 159, 0.45);

  /* legacy names used by every existing page, pointed at the tokens */
  --bg: var(--page); --panel: var(--card); --surf2: var(--surface-2); --panel2: var(--surface-2);
  --raise: var(--card); --ink: var(--navy); --text: var(--navy); --muted: var(--text-2);
  --muted2: var(--text-2); --slate: var(--c-muted); --line: var(--border); --line2: #E8EDEB;
  --scroll: var(--border); --sidebar: var(--card); --topbar: var(--card); --field: var(--surface-2);
  --shadow: 0 1px 2px rgba(11, 28, 35, 0.06), 0 2px 8px rgba(11, 28, 35, 0.05);
  color-scheme: light;
}
html[data-ui="v2"][data-theme="dark"] {
  --surface: #12262F; --surface-2: #1A323C; --text-2: #A9B6BA; --icon: #8FA6AE;
  --link: var(--sky); --selected-bg: #0E3B40; --selected-fg: #7FD8DD;
  --primary-bg: var(--teal); --primary-fg: var(--navy);
  --good-fg: var(--good); --warning-fg: var(--warning); --danger-fg: #F08A8A;
  --good-bg: #0F3A2E; --warning-bg: #3A2E12; --danger-bg: #3E1C1F; --info-bg: #0E3346;
  --focus: 0 0 0 3px rgba(47, 174, 227, 0.55);
  --bg: var(--navy); --panel: #12262F; --surf2: #1A323C; --panel2: #1A323C; --raise: #12262F;
  --ink: var(--page); --text: var(--page); --muted: #A9B6BA; --muted2: #A9B6BA; --slate: #8FA6AE;
  --line: #25414C; --line2: #1D3741; --scroll: #25414C; --sidebar: #12262F; --topbar: #12262F;
  --field: #1A323C; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}