/* Designify Paneel: tokens. De enige plek met kleuren, fonts, radii en spacing.
   Licht is de basis. Donker (navy) volgt het systeem, of wordt gekozen met
   data-theme="dark" / "light" op <html>. */

:root {
  /* Kleuren */
  --bg: #FFFFFF;
  --bg-2: #F5F5F7;          /* sidebar, activity bar (grey 100) */
  --bg-3: #EEEEEC;          /* hover, actief */
  --fg: #0E0A31;            /* navy 900 */
  --fg-2: #6E6C7E;          /* grey 600 */
  --fg-3: #A6A6A6;          /* grey 400 */
  --line: #E6E6E3;
  --accent: #016FE7;        /* blue primary: focus, selectie, links, primaire knop */
  --accent-hover: #015FC6;
  --accent-bg: rgba(1, 111, 231, 0.08);
  --on-accent: #FFFFFF;

  /* Status: nooit blauw */
  --ok: #2FBF71;
  --warn: #E8C547;
  --bad: #E5484D;
  --info: #7A5AF8;
  --muted: #A6A6A6;
  --on-status: #FFFFFF;
  /* Statustekst op lichte achtergrond: geel is als tekst te licht */
  --warn-fg: #9A7B0C;
  --ok-fg: #1E8A51;

  /* Scoreboard: medailles voor plek 1 t/m 3, in licht en donker gelijk */
  --medal-1: #E8C547;
  --medal-2: #C9CBD3;
  --medal-3: #D29A6A;
  --on-medal: #0E0A31;

  /* Zwevende lagen */
  --shadow-float: 0 12px 32px rgba(14, 10, 49, 0.16), 0 2px 6px rgba(14, 10, 49, 0.08);
  --backdrop: rgba(14, 10, 49, 0.32);

  /* Gradient en glas: alleen op de achtergrond van base_focus (login, lege klantomgeving) */
  --gradient: radial-gradient(120% 90% at 85% 0%, #016FE7 0%, rgba(1, 111, 231, 0) 55%),
              radial-gradient(90% 80% at 0% 100%, #1B1650 0%, rgba(27, 22, 80, 0) 60%),
              linear-gradient(160deg, #130F36 0%, #0E0A31 100%);
  --glass: rgba(255, 255, 255, 0.12);
  --glass-blur: 20px;
  --on-gradient: #FFFFFF;
  --on-gradient-2: rgba(255, 255, 255, 0.72);

  /* Fonts */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Open Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-compact: 13.5px;
  --text-focus: 16px;

  /* Radii */
  --r-sm: 8px;              /* kleine elementen, invoervelden */
  --r-btn: 10px;            /* knoppen */
  --r-btn-lg: 12px;         /* grote knoppen */
  --r-card: 15px;           /* kaarten, panelen */
  --r-pill: 999px;

  /* Spacing: Designify-schaal */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;
  --s-160: 160px;

  /* Shell */
  --activity-w: 44px;
  --sidebar-w: 248px;
  --status-h: 24px;
  --header-h: 40px;

  color-scheme: light;
}

/* Donker: navy, niet grijs */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0A31;
    --bg-2: #130F36;
    --bg-3: #1B1650;
    --fg: #FFFFFF;
    --fg-2: #D9D9D9;
    --fg-3: #A6A6A6;
    --line: rgba(255, 255, 255, 0.10);
    --accent-bg: rgba(1, 111, 231, 0.18);
    --warn-fg: #E8C547;
    --ok-fg: #2FBF71;
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --backdrop: rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0A31;
  --bg-2: #130F36;
  --bg-3: #1B1650;
  --fg: #FFFFFF;
  --fg-2: #D9D9D9;
  --fg-3: #A6A6A6;
  --line: rgba(255, 255, 255, 0.10);
  --accent-bg: rgba(1, 111, 231, 0.18);
  --warn-fg: #E8C547;
  --ok-fg: #2FBF71;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --backdrop: rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}