/* Project Wind design tokens.
   Light is the default. Dark applies when the page has data-theme="dark",
   or when the system prefers dark and the user has not picked a theme. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

:root {
  --font-sans: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --bg: #eef0f3;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --sunken: #e6e9ed;
  --line: #d9dde3;
  --line-strong: #b6bec8;
  --text: #151a20;
  --text-2: #3b4450;
  --muted: #5a6470;

  --brand: #1d4ed8;
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --primary-press: #172554;
  --on-primary: #ffffff;
  --primary-tint: #e4ebfb;
  --danger: #b42318;
  --danger-hover: #931c13;
  --on-danger: #ffffff;

  --focus: #f5c518;
  --focus-inner: #151a20;

  --nav: #172554;
  --nav-hover: #1e3168;
  --nav-active: #263d80;
  --nav-text: #c9d4ec;
  --nav-muted: #93a3c8;
  --nav-accent: #60a5fa;
  --hivis: #f5c518;

  --ok-bg: #e1f3e6;   --ok-fg: #17652f;
  --warn-bg: #fcefd9; --warn-fg: #87480a;
  --crit-bg: #fbe3e0; --crit-fg: #a1231a;
  --info-bg: #e4ebfb; --info-fg: #1d4ed8;

  --radius-control: 2px;
  --radius-panel: 4px;
  --shadow-1: 0 1px 2px rgb(16 24 32 / .08);
  --shadow-2: 0 4px 12px rgb(16 24 32 / .12);
  --shadow-3: 0 12px 32px rgb(16 24 32 / .18);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b2026; --surface: #232930; --surface-2: #2a3139; --sunken: #161a1f;
    --line: #38414b; --line-strong: #4f5965;
    --text: #e7eaee; --text-2: #c4cbd3; --muted: #9ea8b3;
    --brand: #60a5fa; --primary: #60a5fa; --primary-hover: #93c5fd; --primary-press: #3b82f6;
    --on-primary: #0b1530; --primary-tint: #1c2c52;
    --danger: #c4372c; --danger-hover: #d4483d;
    --focus-inner: #1b2026;
    --nav: #0f1830; --nav-hover: #18264a; --nav-active: #203260; --nav-text: #bcc8e4; --nav-muted: #8494bd;
    --ok-bg: #1c3a26; --ok-fg: #86d79f; --warn-bg: #3d2c13; --warn-fg: #f2b465;
    --crit-bg: #45211e; --crit-fg: #f49b92; --info-bg: #1c2c52; --info-fg: #93c5fd;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .3); --shadow-2: 0 4px 12px rgb(0 0 0 / .35); --shadow-3: 0 12px 32px rgb(0 0 0 / .45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1b2026; --surface: #232930; --surface-2: #2a3139; --sunken: #161a1f;
  --line: #38414b; --line-strong: #4f5965;
  --text: #e7eaee; --text-2: #c4cbd3; --muted: #9ea8b3;
  --brand: #60a5fa; --primary: #60a5fa; --primary-hover: #93c5fd; --primary-press: #3b82f6;
  --on-primary: #0b1530; --primary-tint: #1c2c52;
  --danger: #c4372c; --danger-hover: #d4483d;
  --focus-inner: #1b2026;
  --nav: #0f1830; --nav-hover: #18264a; --nav-active: #203260; --nav-text: #bcc8e4; --nav-muted: #8494bd;
  --ok-bg: #1c3a26; --ok-fg: #86d79f; --warn-bg: #3d2c13; --warn-fg: #f2b465;
  --crit-bg: #45211e; --crit-fg: #f49b92; --info-bg: #1c2c52; --info-fg: #93c5fd;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .3); --shadow-2: 0 4px 12px rgb(0 0 0 / .35); --shadow-3: 0 12px 32px rgb(0 0 0 / .45);
  color-scheme: dark;
}