/* ------------------------------
   VARIABLES — DARK MODE
------------------------------ */

:root {
  --bg: #0d0d0f;
  --header-bg: rgba(15, 23, 42, 0.85);
  --loader-bg: radial-gradient(circle at top, #1f2937 0, #020617 60%);
  --text: #f5f5f7;
  --text-muted: #b0b0b5;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(148, 163, 184, 0.4);

  --accent: #4f8cff;
  --accent-soft: rgba(79, 140, 255, 0.25);

  --hover-bg: rgba(148, 163, 184, 0.12);

  --badge-gradient: radial-gradient(circle at 20% 0, #93c5fd 0, #1d4ed8 40%, #0f172a 100%);
  --badge-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4), 0 10px 25px rgba(15, 23, 42, 0.9);

  --tag-bg: rgba(15, 23, 42, 0.9);

  --card-bg: radial-gradient(circle at top left, rgba(79, 140, 255, 0.18), transparent 55%),
              rgba(22, 22, 26, 0.85);

  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55);
  --shadow-strong: 0 22px 55px rgba(15, 23, 42, 0.9);

  --loader-ring: rgba(148, 163, 184, 0.35);
}

/* ------------------------------
   LIGHT MODE
------------------------------ */

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f5f7;
    --header-bg: rgba(255, 255, 255, 0.85);
    --text: #111827;
    --text-muted: #6b7280;

    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-strong: rgba(0, 0, 0, 0.15);

    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, 0.12);

    --hover-bg: rgba(0, 0, 0, 0.06);

    --badge-gradient: radial-gradient(circle at 20% 0, #60a5fa 0, #2563eb 40%, #1e3a8a 100%);
    --badge-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 10px 25px rgba(0, 0, 0, 0.15);

    --tag-bg: rgba(255, 255, 255, 0.9);

    --card-bg: radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 55%),
                rgba(255, 255, 255, 0.85);

    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.18);
    --shadow-strong: 0 22px 55px rgba(15, 23, 42, 0.25);

    --loader-ring: rgba(0, 0, 0, 0.25);
  }
}