:root {
  --p: #2594cb;
  --pd: #14587a;
  --pl: #eaf5fb;
  --bg: #eef6fb;
  --tx: #12303f;
  --card: #fff;
  --bd: #cfe6f2;
  --glass: rgba(255, 255, 255, .55);
  --glass-strong: rgba(255, 255, 255, .85);
  --glass-solid: #fff;
  --glass-bd: rgba(255, 255, 255, .75);
  --shadow: 0 8px 32px rgba(20, 88, 122, .16);
  --bubble: rgba(37, 148, 203, .12);
  --blur: blur(14px) saturate(150%);
  --danger: #c0392b;
  --ok: #1e8449;
  --input-bg: rgba(255, 255, 255, .45);
  --heading: var(--pd);
  --profile-admin-bg: var(--pd);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1a24;
    --tx: #e6f3fa;
    --card: #14303f;
    --bd: #245066;
    --pl: #173a4d;
    --glass: rgba(20, 48, 63, .5);
    --glass-strong: rgba(10, 26, 36, .88);
    --glass-solid: #0a1a24;
    --glass-bd: rgba(255, 255, 255, .12);
    --shadow: 0 8px 32px rgba(0, 0, 0, .45);
    --bubble: rgba(37, 148, 203, .22);
    --input-bg: rgba(255, 255, 255, .08);
    --heading: var(--tx);
    --profile-admin-bg: var(--pd);
  }
}

:root[data-theme="dark"] {
  --bg: #0a1a24;
  --tx: #e6f3fa;
  --card: #14303f;
  --bd: #245066;
  --pl: #173a4d;
  --glass: rgba(20, 48, 63, .5);
  --glass-strong: rgba(10, 26, 36, .88);
  --glass-solid: #0a1a24;
  --glass-bd: rgba(255, 255, 255, .12);
  --shadow: 0 8px 32px rgba(0, 0, 0, .45);
  --bubble: rgba(37, 148, 203, .22);
  --input-bg: rgba(255, 255, 255, .08);
  --heading: var(--tx);
  --profile-admin-bg: var(--pd);
}

* {
  box-sizing: border-box
}

[hidden] {
  display: none !important
}

html {
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--tx);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 148, 203, .55), transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(120, 205, 245, .45), transparent 40%),
    radial-gradient(circle at 45% 100%, rgba(20, 88, 122, .45), transparent 48%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass: rgba(255, 255, 255, .92)
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --glass: rgba(20, 48, 63, .95)
    }
  }

  :root[data-theme="dark"] {
    --glass: rgba(20, 48, 63, .95)
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important
  }
}

/* ikonice u zaglavlju (tema, radio): plava ikonica na beloj podlozi zaglavlja */
#theme-toggle,
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #FFFFFF !important;
}

#theme-toggle .ico,
.header-icon .ico {
  width: 22px;
  height: 22px;
  background: var(--pd);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.ico-lock {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.15em;
  background: currentColor;
  -webkit-mask: url("../img/icons/ui/lock.svg") center / contain no-repeat;
  mask: url("../img/icons/ui/lock.svg") center / contain no-repeat;
}