/*
 * spike-dark — git.spike.gay
 *
 * spike.gay's palette turned inside out: the site is ink on warm paper
 * (--bg #ebeae5, --ink #0a0a0a); here it's paper-white text on plum-black,
 * with the site's pink / purple / magenta doing the same jobs they do there.
 *
 * Built on top of Forgejo's own dark theme and only re-points its colour
 * tokens, so Forgejo upgrades keep working. Install:
 *   custom/public/assets/css/theme-spike-dark.css   (this file)
 *   app.ini → [ui] THEMES = spike-dark,forgejo-auto,forgejo-light,forgejo-dark
 *             [ui] DEFAULT_THEME = spike-dark
 */
@import url("./theme-forgejo-dark.css");

@font-face {
  font-family: "Karrik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Karrik-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Karrik";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Karrik-Italic.woff2") format("woff2");
}

:root {
  /* spike.gay brand tokens (same names as the site's global.css) */
  --spike-paper: #ebeae5;
  --spike-ink: #0a0a0a;
  --spike-pink: #df39d8;
  --spike-purple: #6e4e91;
  --spike-magenta: #840c7f;
  --spike-font-display: "Karrik", ui-sans-serif, system-ui, sans-serif;

  /* Surface ramp: Forgejo's blue-grey "steel" swapped for plum-black → paper */
  --steel-900: #0d0b10;
  --steel-850: #110e15;
  --steel-800: #16121b;
  --steel-750: #1c1722;
  --steel-700: #241e2b;
  --steel-650: #2c2534;
  --steel-600: #3a3143;
  --steel-550: #483e52;
  --steel-500: #574b62;
  --steel-450: #665a72;
  --steel-400: #776a83;
  --steel-350: #887b94;
  --steel-300: #9a8ea5;
  --steel-250: #ada2b6;
  --steel-200: #c0b7c8;
  --steel-150: #d4ccd9;
  --steel-100: #e6e2e3;

  /* Primary = spike pink. In dark themes "dark-N" means lighter, "light-N" darker. */
  --color-primary: #df39d8;
  --color-primary-contrast: #0a0a0a;
  --color-primary-dark-1: #e65be0;
  --color-primary-dark-2: #ec7de7;
  --color-primary-dark-3: #f09cec;
  --color-primary-dark-4: #f4b8f1;
  --color-primary-dark-5: #f8d2f6;
  --color-primary-dark-6: #fbe6fa;
  --color-primary-dark-7: #fdf3fd;
  --color-primary-light-1: #cc2fc5;
  --color-primary-light-2: #b326ad;
  --color-primary-light-3: #9a1a94;
  --color-primary-light-4: #840c7f;
  --color-primary-light-5: #6e0a6a;
  --color-primary-light-6: #580855;
  --color-primary-light-7: #430640;
  --color-primary-alpha-10: #df39d819;
  --color-primary-alpha-20: #df39d833;
  --color-primary-alpha-30: #df39d84b;
  --color-primary-alpha-40: #df39d866;
  --color-primary-alpha-50: #df39d880;
  --color-primary-alpha-60: #df39d899;
  --color-primary-alpha-70: #df39d8b3;
  --color-primary-alpha-80: #df39d8cc;
  --color-primary-alpha-90: #df39d8e1;

  --color-secondary-alpha-10: #2c253419;
  --color-secondary-alpha-20: #2c253433;
  --color-secondary-alpha-30: #2c25344b;
  --color-secondary-alpha-40: #2c253466;
  --color-secondary-alpha-50: #2c253480;
  --color-secondary-alpha-60: #2c253499;
  --color-secondary-alpha-70: #2c2534b3;
  --color-secondary-alpha-80: #2c2534cc;
  --color-secondary-alpha-90: #2c2534e1;

  /* Named hues nudged into the brand where Forgejo uses them decoratively */
  --color-purple: #6e4e91;
  --color-purple-light: #8a6aae;
  --color-purple-dark-1: #7d5ca1;
  --color-purple-dark-2: #5c3f7d;
  --color-pink: #df39d8;
  --color-pink-light: #e65be0;
  --color-pink-dark-1: #cc2fc5;
  --color-pink-dark-2: #b326ad;
  --color-violet: #8a6aae;
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-6);

  /* Text: the site's paper colour, never pure white */
  --color-text-dark: #f5f3ef;
  --color-text: #ebeae5;
  --color-text-light: #cfc9d3;
  --color-text-light-1: #b3abba;
  --color-text-light-2: #978fa0;
  --color-text-light-3: #7d7487;
  --color-placeholder-text: var(--color-text-light-3);

  /* Chrome */
  --color-body: #110e15;
  --color-box-header: #1c1722;
  --color-box-body: #16121b;
  --color-box-body-highlight: #1f1926;
  --color-header-wrapper: #0d0b10;
  --color-nav-bg: #0d0b10;
  --color-secondary-nav-bg: #110e15;
  --color-nav-hover-bg: #241e2b;
  --color-menu: #16121b;
  --color-card: #16121b;
  --color-footer: #0d0b10;
  --color-input-background: #0d0b10;
  --color-input-border: #3a3143;
  --color-input-border-hover: #574b62;
  --color-light: #00000028;
  --color-light-border: #ffffff1c;
  --color-hover: #df39d814;
  --color-active: #df39d822;
  --color-caret: var(--spike-pink);
  --color-selection-bg: #df39d855;
  --color-selection-fg: var(--color-text-dark);
  --color-markup-code-block: #0d0b10;
  --color-markup-code-inline: #241e2b;
  --color-code-bg: #0d0b10;
  --color-timeline: #3a3143;
  --color-highlight-bg: #6e4e9140;
  --color-highlight-fg: #ebeae5;
  --color-label-bg: #2c2534;
  --color-reaction-bg: #ffffff0a;
  --color-reaction-active-bg: var(--color-primary-alpha-30);
  --color-tooltip-bg: #ebeae5;
  --color-tooltip-text: #0a0a0a;
  --color-project-board-bg: var(--color-secondary-light-4);
  --color-console-bg: #0d0b10;
  --color-console-border: #2c2534;
  --color-console-menu-bg: #241e2b;
  --color-console-menu-border: #483e52;
  --color-console-active-bg: #3a3143;
  --color-ansi-magenta: #df39d8;
  --color-ansi-bright-magenta: #e65be0;
  --color-overlay-backdrop: #0d0b10d0;
  --fancy-card-bg: #16121b;
  --fancy-card-border: #2c2534;

  accent-color: var(--spike-pink);
  color-scheme: dark;
}

/* The site's signature: a hard pink rule under the nav */
#navbar {
  border-bottom: 2px solid var(--spike-pink) !important;
}

/* Brand typeface for display text only — body copy and code stay on
   Forgejo's UI / monospace stacks so diffs and tables remain readable. */
#navbar .item.brand,
.page-content.home h1,
.page-content.home h2,
.ui.header:not(.attached),
.repo-header .flex-item-title,
.page-content .ui.attached.header,
.user.profile .profile-avatar-name .header {
  font-family: var(--spike-font-display);
  letter-spacing: 0.01em;
}

/* Links read pink, darken to magenta-ish on hover like the site */
.markup a,
.repo-description a,
.comment-body a {
  text-decoration-color: var(--color-primary-alpha-50);
  text-underline-offset: 0.18em;
}
.markup a:hover,
.comment-body a:hover {
  color: var(--color-primary-dark-2);
}

/* Paw cursor from spike.gay, scoped to the nav so it never fights
   text selection in code views */
#navbar a,
#navbar .item {
  cursor: url("../img/paw-point.png") 18 4, pointer;
}

/* Buttons: ink-on-pink like the commission CTAs */
.ui.primary.button,
.ui.primary.buttons .button {
  color: var(--spike-ink);
  font-weight: 600;
}
.ui.primary.button:hover {
  color: var(--spike-ink);
}

/* Landing page: the pink wordmark sits above Forgejo's hero text */
.page-content.home .hero.logo,
.page-content.home .logo {
  filter: drop-shadow(0 0 24px #df39d84d);
}

/* Empty states get a spikon. Purely decorative: if a Forgejo upgrade renames
   these containers the spikon just stops appearing, nothing breaks.
   (Selectors checked against Forgejo 15.0.9.) */
.flex-list > .tw-text-center.tw-p-8::before,
.empty-repo-guide::before {
  content: "";
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 0.75rem;
  background: url("../img/spikon-chill.png") center / contain no-repeat;
}

/* Scrollbars in the plum ramp */
* {
  scrollbar-color: #483e52 transparent;
}