/* ============================================================================
   Varpnir dashboard theme — Gna Signal palette (org brand/palette.json).
   Follows the OS preference; the toggle sets data-theme on <html> and is kept
   in localStorage only (DESIGN.md §10). The customer app's accent is the
   Varpnir green, the admin app's is cobalt, so the two are never confused.
   ========================================================================= */

@font-face {
   font-family: "Manrope";
   src: url("/fonts/Manrope.ttf") format("truetype");
   font-weight: 200 800;
   font-display: swap;
}

:root {
   color-scheme: light;
   --bg: #ffffff;
   --surface: #eef0f3;
   --surface-raised: #f7f8f6;
   --border: #d7dbe0;
   --text: #2b313a;
   --text-secondary: #4f5866;
   --text-muted: #6b7480;
   --accent: #197b64;
   --accent-bg: rgba(25, 123, 100, 0.1);
   --on-accent: #ffffff;
   --ok: #197b64;
   --ok-bg: rgba(25, 123, 100, 0.1);
   --warn: #a65e12;
   --warn-bg: rgba(201, 116, 26, 0.13);
   --danger: #b9473d;
   --danger-bg: rgba(185, 71, 61, 0.1);
   --info: #2457c5;
   --info-bg: rgba(36, 87, 197, 0.1);
   --series-1: #2457c5;
   --series-2: #197b64;
   --series-3: #c9741a;
   --series-4: #4f5866;
   --logo: url("/img/varpnir-logo-green.svg");

   --radius: 8px;
   --sidebar: 228px;
   --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
   --mono: "DejaVu Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

:root.app-admin {
   --accent: #2457c5;
   --accent-bg: rgba(36, 87, 197, 0.1);
   --logo: url("/img/varpnir-logo-blue.svg");
}

@media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #1b2027;
      --surface: #232830;
      --surface-raised: #2b313a;
      --border: #3a414c;
      --text: #f7f8f6;
      --text-secondary: #cbd2db;
      --text-muted: #8e99a8;
      --accent: #5fb89e;
      --accent-bg: rgba(95, 184, 158, 0.14);
      --on-accent: #1b2027;
      --ok: #5fb89e;
      --ok-bg: rgba(95, 184, 158, 0.14);
      --warn: #e0a15c;
      --warn-bg: rgba(201, 116, 26, 0.2);
      --danger: #e6867a;
      --danger-bg: rgba(230, 134, 122, 0.14);
      --info: #7fa6f2;
      --info-bg: rgba(127, 166, 242, 0.14);
      --series-1: #7fa6f2;
      --series-2: #5fb89e;
      --series-3: #c9741a;
      --series-4: #8e99a8;
      --logo: url("/img/varpnir-logo-green-dark.svg");
   }
   :root.app-admin:not([data-theme="light"]) {
      --accent: #7fa6f2;
      --accent-bg: rgba(127, 166, 242, 0.14);
      --logo: url("/img/varpnir-logo-blue-dark.svg");
   }
}

:root[data-theme="dark"] {
   color-scheme: dark;
   --bg: #1b2027;
   --surface: #232830;
   --surface-raised: #2b313a;
   --border: #3a414c;
   --text: #f7f8f6;
   --text-secondary: #cbd2db;
   --text-muted: #8e99a8;
   --accent: #5fb89e;
   --accent-bg: rgba(95, 184, 158, 0.14);
   --on-accent: #1b2027;
   --ok: #5fb89e;
   --ok-bg: rgba(95, 184, 158, 0.14);
   --warn: #e0a15c;
   --warn-bg: rgba(201, 116, 26, 0.2);
   --danger: #e6867a;
   --danger-bg: rgba(230, 134, 122, 0.14);
   --info: #7fa6f2;
   --info-bg: rgba(127, 166, 242, 0.14);
   --series-1: #7fa6f2;
   --series-2: #5fb89e;
   --series-3: #c9741a;
   --series-4: #8e99a8;
   --logo: url("/img/varpnir-logo-green-dark.svg");
}

:root.app-admin[data-theme="dark"] {
   --accent: #7fa6f2;
   --accent-bg: rgba(127, 166, 242, 0.14);
   --logo: url("/img/varpnir-logo-blue-dark.svg");
}