:root {
  --page-bg: rgb(216, 231, 242);
  --chrome-bg: rgba(216, 231, 242, 0.9);
  --chrome-line: rgb(200, 215, 226);
  --panel-bg: rgba(240, 247, 253, 0.9);
  --text: rgb(32, 44, 64);
  --text-muted: rgb(137, 159, 179);
  --accent: rgb(80, 115, 143);
  --radius: 12px;
  --shadow: 0 8px 24px rgba(32, 44, 64, 0.12);
}

body[data-theme="dark"] {
  --page-bg: rgb(2, 4, 6);
  --chrome-bg: rgba(3, 8, 12, 0.88);
  --chrome-line: rgba(126, 173, 201, 0.20);
  --panel-bg: rgba(5, 12, 18, 0.82);
  --text: rgb(234, 241, 245);
  --text-muted: rgb(170, 185, 197);
  --accent: rgb(125, 185, 216);
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-theme="dark"] .sun-panel,
body[data-theme="dark"] .popup-content,
body[data-theme="dark"].nav-open .header-col-nav {
  -webkit-backdrop-filter: blur(14px) saturate(0.75);
  backdrop-filter: blur(14px) saturate(0.75);
}

html {
  touch-action: manipulation;
}

html, body {
  font-family: 'PTSansRegular';
  color: var(--text);
  margin: 0;
  padding: 0;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  -o-user-select: text;
  user-select: text;
}

.wrapper {
  --wrapper-max: 1500px;
  --wrapper-pad: 16px;
  max-width: var(--wrapper-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wrapper-pad);
  padding-right: var(--wrapper-pad);
}

@font-face {
    font-family: 'PTSansRegular';
    src: url('../fonts/PTSansRegular.ttf') format('truetype');
}

body.default-page,
body.sun-page {
    background-color: var(--page-bg);
}