/* ════════════════════════════════════════════════════════════════════════
   Smartsys — shared theme tokens
   Same design language as the Smart City IT website, so the hub cards and
   the system they open read as one product.

   Every value is defined for BOTH themes. Foreground/background pairs are
   checked to WCAG AA: 4.5:1 for text, 3:1 for control borders and focus
   rings. Dark mode uses lighter tonal variants of the brand indigo — never
   inverted colours.

   To re-brand: change --accent / --accent-fill only.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* surfaces */
  --app-bg:        #F5F7FC;   /* page background            */
  --app-surface:   #FFFFFF;   /* cards, panels              */
  --app-surface-2: #EEF1F8;   /* inset / table header       */
  --app-line:      #E4E7F2;   /* hairline dividers          */
  --app-line-strong:#868FB6;  /* control borders   3.0:1    */

  /* text */
  --app-text:      #12162B;   /* 16.7:1 on surface */
  --app-muted:     #525873;   /*  7.0:1 on surface */
  --app-faint:     #6B7290;   /*  5.0:1 — was #94A3B8 at 2.6:1 (failed AA) */

  /* brand accent */
  --accent:        #4A56C4;   /* text / icons / borders   6.1:1 on white */
  --accent-strong: #3B46A6;
  --accent-fill:   #4A56C4;   /* solid button background                 */
  --on-accent:     #FFFFFF;   /* text on that fill        6.1:1          */
  --accent-tint:   #EEF0FB;   /* subtle badge / hover wash               */

  /* status — meaning is always carried by an icon or text as well */
  --ok:      #15803D;   /* 5.0:1 */
  --warn:    #A16207;   /* 4.9:1 */
  --bad:     #B91C1C;   /* 6.5:1 */
  --info:    #1D4ED8;

  /* the always-dark navigation rail keeps the brand navy in both themes */
  --rail-bg:   #10163A;
  --rail-text: #E7EAF8;
  --rail-muted:#A8B0D8;

  /* data-viz ramp — deep enough for white/dark text on a light page */
  --viz-blue:#1D4ED8; --viz-indigo:#4A56C4; --viz-violet:#7C3AED;
  --viz-sky:#0284C7;  --viz-slate:#64748B;  --viz-pink:#DB2777;
  --viz-teal:#0D9488; --viz-red:#DC2626;

  --radius: 10px;
  --shadow:    0 1px 2px rgba(10,14,34,.06), 0 1px 3px rgba(10,14,34,.05);
  --shadow-md: 0 4px 16px rgba(10,14,34,.10);
  --shadow-lg: 0 8px 32px rgba(10,14,34,.14);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-bg:        #0A0E22;
  --app-surface:   #141A35;
  --app-surface-2: #1D2447;
  --app-line:      #2E3560;
  --app-line-strong:#6B75C0;   /* 4.0:1 vs surface */

  --app-text:      #EEF0FA;    /* 15.0:1 on surface */
  --app-muted:     #A8B0D8;    /*  8.0:1 on surface */
  --app-faint:     #8891BD;    /*  5.4:1 on surface */

  --accent:        #9AA6F5;    /*  7.4:1 on surface */
  --accent-strong: #B3BCF8;
  --accent-fill:   #4F5FD4;    /*  white on it = 5.4:1 */
  --on-accent:     #FFFFFF;
  --accent-tint:   #232B52;

  --ok:   #4ADE80;   /*  9.8:1 */
  --warn: #FBBF24;   /* 10.2:1 */
  --bad:  #F87171;   /*  6.2:1 */
  --info: #93B4FD;

  --rail-bg:   #0D1229;
  --rail-text: #EEF0FA;
  --rail-muted:#A8B0D8;

  /* lighter tints so the same series stay legible on a dark page */
  --viz-blue:#93B4FD; --viz-indigo:#9AA6F5; --viz-violet:#C4B5FD;
  --viz-sky:#7DD3FC;  --viz-slate:#A8B0D8;  --viz-pink:#F9A8D4;
  --viz-teal:#5EEAD4; --viz-red:#FCA5A5;

  --shadow:    0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.6);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.7);
}

/* Follow the OS until the user chooses for themselves. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --app-bg:#0A0E22; --app-surface:#141A35; --app-surface-2:#1D2447;
    --app-line:#2E3560; --app-line-strong:#6B75C0;
    --app-text:#EEF0FA; --app-muted:#A8B0D8; --app-faint:#8891BD;
    --accent:#9AA6F5; --accent-strong:#B3BCF8; --accent-fill:#4F5FD4;
    --on-accent:#FFFFFF; --accent-tint:#232B52;
    --ok:#4ADE80; --warn:#FBBF24; --bad:#F87171; --info:#93B4FD;
    --rail-bg:#0D1229; --rail-text:#EEF0FA; --rail-muted:#A8B0D8;
    --viz-blue:#93B4FD; --viz-indigo:#9AA6F5; --viz-violet:#C4B5FD;
    --viz-sky:#7DD3FC;  --viz-slate:#A8B0D8;  --viz-pink:#F9A8D4;
    --viz-teal:#5EEAD4; --viz-red:#FCA5A5;
    --shadow:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 4px 16px rgba(0,0,0,.6);
    --shadow-lg:0 8px 32px rgba(0,0,0,.7);
  }
}

/* ── Theme toggle ───────────────────────────────────────────────────────
   Icon-only control: 44x44 hit area, its own accessible name, and
   aria-pressed carries the state for screen readers. */
.theme-toggle {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--app-line-strong);
  border-radius: 10px; color: var(--app-muted); cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.theme-toggle:hover { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .i-sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-sun  { display: none; }
}
/* On the dark navigation rail the control sits on navy in both themes. */
.sidebar .theme-toggle, .topbar .theme-toggle {
  border-color: rgba(255,255,255,.26); color: var(--rail-text);
}
.sidebar .theme-toggle:hover, .topbar .theme-toggle:hover {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff;
}

/* ── Accessibility baseline ─────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}