/* ============================================
   POLUBOG — GLOBAL UI
   Based on v39
   ============================================ */

/* 01. DESIGN TOKENS */

:root {
  --pb-ink: #161718;
  --pb-paper: #E2E7EC;
  --pb-orange: #FB970C;
  --pb-blue: #4E8098;
  --pb-muted: #ADB7BF;
}

/* 02. TEXT SELECTION */

::selection {
  background-color: var(--pb-orange);
  color: var(--pb-ink);
}

::-moz-selection {
  background-color: var(--pb-orange);
  color: var(--pb-ink);
}

/* 03. VERTICAL SCROLLBAR */

html {
  scrollbar-color: var(--pb-blue) var(--pb-ink);
  scrollbar-width: thin;
}

/* WebKit fallback */

html::-webkit-scrollbar {
  width: 8px;
}

html::-webkit-scrollbar-track {
  background: var(--pb-ink);
}

html::-webkit-scrollbar-thumb {
  background: var(--pb-blue);
  border-radius: 8px;
}

/* 04. KEYBOARD FOCUS */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--pb-orange);
  outline-offset: 4px;
}

/* 05. SCROLL PROGRESS INDICATOR */

#pb-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;

  background: var(--pb-orange);

  transform: scaleX(0);
  transform-origin: left center;

  z-index: 9990;
  pointer-events: none;
}

/* 06. ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  #pb-scroll-progress {
    transition: none !important;
  }
}