/* pebble.moe Forgejo auto theme - follows OS preference.
   Built like upstream's binary theme-forgejo-auto.css: light declarations
   first, then dark overrides inside a real @media block, all one file.
   (My earlier @import version was broken: media imports are load-time and
   the light file cascaded over dark afterwards.) */
:root {
:root {
  --color-body: linear-gradient(180deg, #0a1633 0%, #000000 100%);
  --color-primary: #2f6fe0;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #2a63c9;
  --color-primary-dark-2: #2456b2;
  --color-primary-dark-3: #1e4a9b;
  --color-primary-dark-4: #1a3f85;
  --color-primary-light-1: #4a84ea;
  --color-primary-light-2: #6e9eff;
  --color-primary-light-3: #8cb8ff;
  --color-primary-light-4: #a8c4ff;
  --color-primary-light-5: #c2d6ff;
  --color-primary-light-6: #dbe7ff;
  --color-primary-light-7: #eff4ff;
  --color-primary-alpha-10: #2f6fe019;
  --color-primary-alpha-20: #2f6fe033;
  --color-primary-alpha-30: #2f6fe04b;
  --color-primary-alpha-40: #2f6fe066;
  --color-primary-alpha-50: #2f6fe080;
  --color-primary-alpha-60: #2f6fe099;
  --color-primary-alpha-70: #2f6fe0b3;
  --color-primary-alpha-80: #2f6fe0cc;
  --color-primary-alpha-90: #2f6fe0e1;
  --color-primary-hover: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-dark-4);
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-5);
  --color-highlight-fg: var(--color-primary-light-4);
  --color-highlight-bg: var(--color-primary-alpha-20);
  --color-reaction-active-bg: var(--color-primary-alpha-30);
  --color-reaction-hover-bg: var(--color-primary-alpha-40);
  --color-selection-bg: #8cb8ff;
  --color-selection-fg: #06122b;
  --color-caret: var(--color-primary);
  accent-color: var(--color-accent);
}
}

/* ---- syntax highlighting, recoloured to match the accent ---------------- */
.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cs{color:#5a647a}
.chroma .cp{color:#8cb8ff}
.chroma .cpf{color:#2f6fe0}
.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kr,.chroma .kt{color:#2f6fe0}
.chroma .kp{color:#0f7a72}
.chroma .o,.chroma .ow{color:#8cb8ff}
.chroma .p{color:#4a5a7a}
.chroma .n,.chroma .na,.chroma .nb,.chroma .nc,.chroma .nd,.chroma .ne,.chroma .nf,.chroma .ni,.chroma .nl,.chroma .nn,.chroma .nt,.chroma .nv,.chroma .nx{color:#1a2a4a}
.chroma .na,.chroma .nf,.chroma .fm{color:#2f6fe0}
.chroma .nb,.chroma .bp{color:#0f7a72}
.chroma .nc,.chroma .ne,.chroma .nt{color:#6a3fd0}
.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo,.chroma .il{color:#1a7f4b}
.chroma .s,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .dl,.chroma .sd,.chroma .s2,.chroma .se,.chroma .sh,.chroma .si,.chroma .sx,.chroma .sr,.chroma .s1,.chroma .ss{color:#1a7f4b}
.chroma .ge{color:#1a2a4c;font-style:italic}
.chroma .gs{color:#1a2a4c;font-weight:700}
.chroma .gd{color:#8f114e;background-color:#ffe3ee}
.chroma .gi{color:#14532d;background-color:#dcfce7}
.chroma .gh{color:#2f6fe0}
.chroma .gu{color:#6a3fd0}
.chroma .gr{color:#b91c1c}
.chroma .gt{color:#8f114e}
.chroma .go{color:#8cb8ff}
.chroma .gp{color:#4a5a7a}
.chroma .w{color:#a2b1d3}

@media (prefers-color-scheme: dark) {
  :root {
:root {
  --color-body: linear-gradient(180deg, #0a1633 0%, #000000 100%);
  --color-primary: #8cb8ff;
  --color-primary-contrast: #06122b;
  --color-primary-dark-1: #a8c4ff;
  --color-primary-dark-2: #a8c4ff;
  --color-primary-dark-3: #c2d6ff;
  --color-primary-dark-4: #c2d6ff;
  --color-primary-light-1: #6e9eff;
  --color-primary-light-2: #5a8af0;
  --color-primary-light-3: #4a76d8;
  --color-primary-light-4: #3a62bd;
  --color-primary-light-5: #2f5099;
  --color-primary-light-6: #263f77;
  --color-primary-light-7: #1d3057;
  --color-primary-alpha-10: #8cb8ff19;
  --color-primary-alpha-20: #8cb8ff33;
  --color-primary-alpha-30: #8cb8ff4b;
  --color-primary-alpha-40: #8cb8ff66;
  --color-primary-alpha-50: #8cb8ff80;
  --color-primary-alpha-60: #8cb8ff99;
  --color-primary-alpha-70: #8cb8ffb3;
  --color-primary-alpha-80: #8cb8ffcc;
  --color-primary-alpha-90: #8cb8ffe1;
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-light-2);
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-5);
  --color-highlight-fg: var(--color-primary-light-4);
  --color-highlight-bg: var(--color-primary-alpha-20);
  --color-reaction-active-bg: var(--color-primary-alpha-30);
  --color-reaction-hover-bg: var(--color-primary-alpha-40);
  --color-selection-bg: #8cb8ff;
  --color-selection-fg: #06122b;
  --color-caret: var(--color-primary-light-1);
  accent-color: var(--color-accent);
}
  }
  
/* ---- syntax highlighting, recoloured to match the accent ---------------- */
.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cs{color:#6b7a99}
.chroma .cp{color:#8cb8ff}
.chroma .cpf{color:#a8c4ff}
.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kr,.chroma .kt{color:#a8c4ff}
.chroma .kp{color:#7de8d8}
.chroma .o,.chroma .ow{color:#8cb8ff}
.chroma .p{color:#b9c6de}
.chroma .n,.chroma .na,.chroma .nb,.chroma .nc,.chroma .nd,.chroma .ne,.chroma .nf,.chroma .ni,.chroma .nl,.chroma .nn,.chroma .nt,.chroma .nv,.chroma .nx{color:#d6e4ff}
.chroma .na,.chroma .nf,.chroma .fm{color:#8cb8ff}
.chroma .nb,.chroma .bp{color:#7de8d8}
.chroma .nc,.chroma .ne,.chroma .nt{color:#b39dff}
.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo,.chroma .il{color:#a8e8a0}
.chroma .s,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .dl,.chroma .sd,.chroma .s2,.chroma .se,.chroma .sh,.chroma .si,.chroma .sx,.chroma .sr,.chroma .s1,.chroma .ss{color:#8fd6a8}
.chroma .ge{color:#d6e4ff;font-style:italic}
.chroma .gs{color:#d6e4ff;font-weight:700}
.chroma .gd{color:#ff9db3;background-color:#3a1f2b}
.chroma .gi{color:#a8e8a0;background-color:#1e3527}
.chroma .gh{color:#8cb8ff}
.chroma .gu{color:#b39dff}
.chroma .gr{color:#ff9db3}
.chroma .gt{color:#ff9db3}
.chroma .go{color:#8cb8ff}
.chroma .gp{color:#b9c6de}
.chroma .w{color:#5a6a85}

}

/* ---- pebble.moe structural tweaks --------------------------------------- */
:root {
  --brand-light-fill: #8cb8ff;
  --brand-dark-fill: #8cb8ff;
}
#navbar-logo img {
  width: auto;
  height: 30px;
}