/* ===============================================================
   Straßenwärter Tool – Theme Tokens (Light/Dark) + Blue Accent
   -------------------------------------------------------------
   - Blue accent is mandatory (#2563eb)
   - Theme switch via: document.documentElement.dataset.theme
     values: "dark" | "light"
   =============================================================== */

/* Default = Dark */
:root{
  color-scheme: dark;

  /* Accent */
  --accent: #2563eb;      /* Blue */
  --accent-2: #3b82f6;    /* Lighter blue */
  --accent-soft: rgba(37, 99, 235, .14);
  --focus: rgba(37, 99, 235, .85);

  /* Surfaces */
  --bg: #0b1220;
  --bg-2: #0f172a;
  --surface: rgba(15, 23, 42, .78);
  --surface-2: rgba(2, 6, 23, .55);
  --card: rgba(17, 24, 39, .55);

  /* Text */
  --text: #e5e7eb;
  --muted: #a5b4fc;
  --muted-2: #94a3b8;

  /* Borders / shadows */
  --border: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.14);
  --shadow: rgba(0,0,0,.40);
  --shadow-2: rgba(0,0,0,.55);

  /* Radius */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;

  /* Effects */
  --blur: 10px;

  /* Back-compat variables used across existing CSS */
  --nav-bg: rgba(15, 23, 42, 0.92);
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  --active-blue: linear-gradient(120deg, rgba(37, 99, 235, 0.92), rgba(59, 130, 246, 0.92));
  --text-light: var(--text);
  --hover-bright: #ffffff;
  --blur-bg: rgba(15, 23, 42, 0.96);
  --overlay-bg: rgba(0, 0, 0, 0.55);
}

/* Light theme */
html[data-theme="light"]{
  color-scheme: light;

  --bg: #f6f7fb;
  --bg-2: #eef2ff;
  --surface: rgba(255,255,255,.78);
  --surface-2: rgba(255,255,255,.72);
  --card: rgba(255,255,255,.92);

  --text: #0f172a;
  --muted: #1e3a8a;
  --muted-2: #475569;

  --border: rgba(15, 23, 42, .10);
  --border-2: rgba(15, 23, 42, .14);
  --shadow: rgba(2, 6, 23, .10);
  --shadow-2: rgba(2, 6, 23, .16);

  /* Back-compat */
  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-border: rgba(15, 23, 42, 0.10);
  --nav-shadow: 0 8px 22px rgba(2, 6, 23, 0.08);
  --blur-bg: rgba(255,255,255,0.92);
  --overlay-bg: rgba(2, 6, 23, 0.42);
}

/* Global base (kept minimal to avoid breaking existing screens) */
body{
  background: radial-gradient(1200px 700px at 20% 0%, rgba(37, 99, 235, .22) 0%, transparent 55%),
              radial-gradient(900px 600px at 85% 15%, rgba(59, 130, 246, .14) 0%, transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
}

html[data-theme="light"] body{
  background: radial-gradient(1200px 700px at 20% 0%, rgba(37, 99, 235, .14) 0%, transparent 55%),
              radial-gradient(900px 600px at 85% 15%, rgba(59, 130, 246, .10) 0%, transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* Accessible focus */
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }