/* DK design tokens (prefix dkc- so it never clashes with the older dk- names inside DK_Forms). Version 1.0 (2026-10-17)
   Shared by every DK app (DK_Forms, SCADA Manager, LEDBoardAvailability, future apps).
   Do not edit a copy inside an app. Edit this file in DK_Apps_Dev\shared\dk-design and re-copy.
   Colour means status only. Accent is blue. */

:root {
  /* Surfaces and text */
  --dkc-canvas: #f2f3f5;
  --dkc-surface: #ffffff;
  --dkc-surface-2: #f7f8fa;
  --dkc-tint: #edf4fb;
  --dkc-ink: #1f2329;
  --dkc-muted: #646b76;
  --dkc-line: #dadde2;
  --dkc-line-strong: #c3c8d0;

  /* Accent and primary button */
  --dkc-accent: #1f7acb;
  --dkc-accent-soft: #d7e9f9;
  --dkc-primary-bg: #2f3238;
  --dkc-primary-ink: #ffffff;

  /* Status: green good, amber waiting, red problem */
  --dkc-ok: #1e9a58;
  --dkc-ok-bg: #e3f4ea;
  --dkc-ok-text: #14582f;
  --dkc-warn: #e0a100;
  --dkc-warn-bg: #fff3d6;
  --dkc-warn-text: #6b4600;
  --dkc-err: #d3382b;
  --dkc-err-bg: #fbe8e6;
  --dkc-err-text: #8c1d14;
  --dkc-locked-bg: #eff1f4;

  /* Environment badges (which database or system am I on) */
  --dkc-env-grey: #5b6472;
  --dkc-env-green: #15803d;
  --dkc-env-blue: #1d4ed8;
  --dkc-env-amber: #b45309;
  --dkc-env-red: #b91c1c;
  --dkc-env-purple: #7e22ce;

  /* The signature: the rainbow line under the top bar */
  --dkc-spectrum: linear-gradient(90deg, #e8392b, #f5a623, #f2d31b, #2db36b, #1f7acb, #7b3fa0);

  /* Type */
  --dkc-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dkc-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --dkc-text: 14.5px;

  /* Shape and spacing: one radius scale, one spacing scale */
  --dkc-r-sm: 6px;
  --dkc-r: 8px;
  --dkc-r-lg: 12px;
  --dkc-s1: 4px;
  --dkc-s2: 8px;
  --dkc-s3: 12px;
  --dkc-s4: 16px;
  --dkc-s5: 24px;
  --dkc-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Dark mode follows the system. Apps with a manual switch put class "dark" or data-theme="dark" on <html>. DK_Forms sets data-appearance, which also turns the system rule off. */
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance]):not([data-theme]):not(.light):not(.dark) {
    --dkc-canvas: #15171a;
    --dkc-surface: #1e2125;
    --dkc-surface-2: #24282d;
    --dkc-tint: #232c38;
    --dkc-ink: #e8eaee;
    --dkc-muted: #9aa1ac;
    --dkc-line: #30343b;
    --dkc-line-strong: #434852;
    --dkc-accent: #4da3e8;
    --dkc-accent-soft: #25384c;
    --dkc-primary-bg: #4da3e8;
    --dkc-primary-ink: #0e1722;
    --dkc-ok: #4cc585;
    --dkc-ok-bg: #173022;
    --dkc-ok-text: #8fdba8;
    --dkc-warn-bg: #3a3118;
    --dkc-warn-text: #f0d28a;
    --dkc-err: #f26b5e;
    --dkc-err-bg: #3a1c1a;
    --dkc-err-text: #f2a8a2;
    --dkc-locked-bg: #272b31;
  }
}
:root.dark, :root[data-theme="dark"] {
  --dkc-canvas: #15171a;
  --dkc-surface: #1e2125;
  --dkc-surface-2: #24282d;
  --dkc-tint: #232c38;
  --dkc-ink: #e8eaee;
  --dkc-muted: #9aa1ac;
  --dkc-line: #30343b;
  --dkc-line-strong: #434852;
  --dkc-accent: #4da3e8;
  --dkc-accent-soft: #25384c;
  --dkc-primary-bg: #4da3e8;
  --dkc-primary-ink: #0e1722;
  --dkc-ok: #4cc585;
  --dkc-ok-bg: #173022;
  --dkc-ok-text: #8fdba8;
  --dkc-warn-bg: #3a3118;
  --dkc-warn-text: #f0d28a;
  --dkc-err: #f26b5e;
  --dkc-err-bg: #3a1c1a;
  --dkc-err-text: #f2a8a2;
  --dkc-locked-bg: #272b31;
}