/* bimbotech dark theme for Forgejo 16.
 * Starts from the built-in theme-forgejo-dark.css, then overrides the
 * --color-* custom properties with the bimbotech palette (same tokens as
 * ~/Projects/pm/deploy/theme/pm-theme.css). Nav/canvas black, panels ink,
 * primary pink/hot with ink text on hot buttons, signals mint/yellow/hot/
 * blue, accents purple/blue. See README.md for the contrast table and the
 * reasoning behind what was left alone (diff add/remove colors, the
 * --color-primary-light-N / -dark-N ramp direction).
 */
@import "./theme-forgejo-dark.css";

@font-face {
  font-family: "URW Gothic";
  src: url("../fonts/urw-gothic-book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "URW Gothic";
  src: url("../fonts/urw-gothic-book-oblique.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "URW Gothic";
  src: url("../fonts/urw-gothic-demi.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "URW Gothic";
  src: url("../fonts/urw-gothic-demi-oblique.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* brand tokens. Round 4 (cc): pink #FFB0FB replaces hot #FF6EB4/hot2
     #FF79F6 as the accent everywhere - hot/hot2 are no longer used. */
  --bt-pink: #FFB0FB;
  --bt-purple: #DF73FF;
  --bt-blue: #87CEFA;
  --bt-mint: #84E6BD;
  --bt-yellow: #FCFF46;
  --bt-black: #000000;
  --bt-ink: #161616;
  --bt-paper: #F9F7F7;
  --bt-mute: #8A8A8A;

  /* chrome: black nav/canvas, ink panels */
  --color-body: var(--bt-black);
  --color-nav-bg: var(--bt-black);
  --color-secondary-nav-bg: var(--bt-black);
  --color-header-wrapper: var(--bt-black);
  --color-header-wrapper-transparent: #00000000;
  --color-footer: var(--bt-black);
  --color-box-header: var(--bt-ink);
  --color-box-body: var(--bt-ink);
  --color-box-body-highlight: #1f1f1f;
  --color-card: var(--bt-ink);
  --color-menu: var(--bt-ink);
  --color-active: #2a2a2a;
  --color-text: var(--bt-paper);
  --color-input-text: var(--bt-paper);
  --color-input-background: var(--bt-ink);
  --color-input-border: var(--bt-mute);
  --color-secondary: #2a2a2a;

  /* --- primary: skyblue (round 4, cc). Ink text passes at 10.5:1 (button
     fill AND plain-text use both clear AA against black/ink - unlike hot
     in round 2, blue needs no button/text variable split in dark mode). --- */
  --color-primary: #87CEFA;
  --color-primary-contrast: #161616;
  --color-primary-dark-1: #95D4FB;
  --color-primary-dark-2: #A4DAFB;
  --color-primary-dark-3: #B2E0FC;
  --color-primary-dark-4: #C0E5FC;
  --color-primary-dark-5: #CEEBFD;
  --color-primary-dark-6: #DDF1FE;
  --color-primary-dark-7: #EBF7FE;
  --color-primary-light-1: #77B5DC;
  --color-primary-light-2: #679DBE;
  --color-primary-light-3: #5784A1;
  --color-primary-light-4: #476C83;
  --color-primary-light-5: #375365;
  --color-primary-light-6: #273B47;
  --color-primary-light-7: #17222A;
  --color-primary-alpha-10: #87CEFA1a;
  --color-primary-alpha-20: #87CEFA33;
  --color-primary-alpha-30: #87CEFA4c;
  --color-primary-alpha-40: #87CEFA66;
  --color-primary-alpha-50: #87CEFA80;
  --color-primary-alpha-60: #87CEFA99;
  --color-primary-alpha-70: #87CEFAb2;
  --color-primary-alpha-80: #87CEFAcc;
  --color-primary-alpha-90: #87CEFAe6;
  --color-primary-hover: #77B5DC;
  --color-primary-active: #679DBE;
  --color-accent: var(--bt-blue);

  /* --- signals: success=mint, warning=yellow, danger=hot, info=blue --- */
  /* --- accents: purple, pink --- */
  --color-green: #84E6BD;
  --color-green-light: #56967B;
  --color-green-dark-1: #A3ECCE;
  --color-green-dark-2: #BBF1DB;
  --color-green-badge: #84E6BD;
  --color-green-badge-bg: #84E6BD26;
  --color-green-badge-hover-bg: #84E6BD4c;
  --color-orange: #FCFF46;
  --color-orange-light: #A4A62E;
  --color-orange-dark-1: #FDFF74;
  --color-orange-dark-2: #FDFF99;
  --color-orange-badge: #FCFF46;
  --color-orange-badge-bg: #FCFF4626;
  --color-orange-badge-hover-bg: #FCFF464c;
  --color-red: #FFB0FB;
  --color-red-light: #A672A3;
  --color-red-dark-1: #FFC4FC;
  --color-red-dark-2: #FFD4FD;
  --color-red-badge: #FFB0FB;
  --color-red-badge-bg: #FFB0FB26;
  --color-red-badge-hover-bg: #FFB0FB4c;
  --color-blue: #87CEFA;
  --color-blue-light: #5886A2;
  --color-blue-dark-1: #A5DAFB;
  --color-blue-dark-2: #BDE4FC;
  --color-blue-badge: #87CEFA;
  --color-blue-badge-bg: #87CEFA26;
  --color-blue-badge-hover-bg: #87CEFA4c;
  --color-purple: #DF73FF;
  --color-purple-light: #914BA6;
  --color-purple-dark-1: #E796FF;
  --color-purple-dark-2: #EDB2FF;
  --color-purple-badge: #DF73FF;
  --color-purple-badge-bg: #DF73FF26;
  --color-purple-badge-hover-bg: #DF73FF4c;
  --color-pink: #FFB0FB;
  --color-pink-light: #A672A3;
  --color-pink-dark-1: #FFC4FC;
  --color-pink-dark-2: #FFD4FD;
  --color-pink-badge: #FFB0FB;
  --color-pink-badge-bg: #FFB0FB26;
  --color-pink-badge-hover-bg: #FFB0FB4c;

  /* --color-yellow is a separate var from --color-orange (used by
     .ui.warning.message .header / .ui.yellow.message), aliased to the
     same warning=yellow treatment for consistency */
  --color-yellow: #FCFF46;
  --color-yellow-light: #A4A62E;
  --color-yellow-dark-1: #FDFF74;
  --color-yellow-dark-2: #FDFF99;
  --color-yellow-badge: #FCFF46;
  --color-yellow-badge-bg: #FCFF4626;
  --color-yellow-badge-hover-bg: #FCFF464c;

  /* flash/message banners (.ui.message): error=pink, warning=yellow,
     info=blue, success=mint. bg = 15% hue mixed into black, border/text
     = full hue (>=6.9:1 on that bg - see README). Diff colors untouched. */
  --color-error-bg: #261A26;
  --color-error-border: #FFB0FB;
  --color-error-text: #FFB0FB;
  --color-warning-bg: #26260A;
  --color-warning-border: #FCFF46;
  --color-warning-text: #FCFF46;
  --color-info-bg: #141F26;
  --color-info-border: #87CEFA;
  --color-info-text: #87CEFA;
  --color-success-bg: #14221C;
  --color-success-border: #84E6BD;
  --color-success-text: #84E6BD;

  /* generic labels (SHA chips, counter badges - .sha.label and .ui.label
     both read --color-label-bg/-text): bg is an ink-dark neutral here, so
     text needs to be LIGHT, not ink - round 3 found ink-on-#2a2a2a
     unreadable (mint monospace on ink, 9.6:1) */
  --color-label-text: var(--bt-mint);
  --color-label-bg: #2a2a2a;
  --color-label-bg-alt: #333333;
  --color-label-hover-bg: #3a3a3a;
  --color-label-active-bg: #444444;

  /* off-palette navy sweep (round 3): these still inherited stock
     steel-* (blue-grey) values from the built-in dark theme - the repo
     search filter button (--color-button) was the visible one, the rest
     are the same class of bug */
  --color-button: #2a2a2a;
  --color-hover: #2a2a2a;
  --color-timeline: #3a3a3a;
  --color-input-toggle-background: #2a2a2a;
  --color-secondary-bg: #2a2a2a;
}

/* heatmap (round 3+4): cc wants it to stay a pink scale (now #FFB0FB,
   round 4b) even though --color-primary is blue - the Vue heatmap
   widget's JS hardcodes var(--color-primary/-light-2/-light-4/-dark-2/
   -dark-4) as its 5-step fill ramp (confirmed by reading
   activity-heatmap.js), so this can only be done by re-scoping those
   exact variable names for its subtree, not by editing the (compiled-in,
   out of scope) JS. Empty cells read --color-secondary-alpha-60,
   inherited stock steel-700 (off-palette navy) - scoped to ink here too. */
#user-heatmap {
  --color-primary: #FFB0FB;
  --color-primary-light-2: #B27BB0;
  --color-primary-light-4: #734F71;
  --color-primary-dark-2: #FFBCFC;
  --color-primary-dark-4: #FFCCFC;
  --color-secondary-alpha-60: #2a2a2a;
}

/* font: URW Gothic everywhere except monospace (code/diffs untouched) */
html,
body,
button,
input,
select,
textarea,
.ui.button,
.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.header,
.ui.menu,
h1, h2, h3, h4, h5, h6 {
  font-family: "URW Gothic", "Century Gothic", sans-serif;
}

/* logo: bimbotech wordmark, widened so it reads at ~22px tall in the
   30x30 navbar slot Forgejo 16 renders (see install.sh img override) */
#navbar-logo img {
  width: auto !important;
  height: 22px !important;
  max-width: none !important;
}

/* navbar text: Fomantic's own .ui.menu .item sets a literal #000000de,
   not a --color-* var (confirmed by reading index.css) - #navbar .item
   already outranks it on specificity, !important added since the full
   minified base stylesheet wasn't exhaustively audited for edge cases */
#navbar,
#navbar a,
#navbar a.item,
#navbar button.item,
#navbar details.dropdown > summary,
#navbar .item {
  color: var(--bt-paper) !important;
}
#navbar svg {
  fill: var(--bt-paper) !important;
  color: var(--bt-paper) !important;
}
#navbar a.item:hover,
#navbar button.item:hover,
#navbar details.dropdown > summary:hover {
  color: var(--bt-pink) !important;
}
/* the "Sign in" nav item (and any other active/hover nav pill) gets its
   own background via Fomantic's .active.item{background:var(--color-active)}
   - explicit here rather than relying on --color-active (used elsewhere
   for panel dropdowns, not nav-specific) matching by coincidence */
#navbar .active.item,
#navbar .item:hover,
#navbar .item:focus,
#navbar details.dropdown[open] > summary {
  background: #2a2a2a !important;
}

/* section headers: pink (round 4). .ui.header requires both classes
   together, so this doesn't touch .ui.error.message .header etc (those
   are bare .header, mapped separately to the signal hues). */
h1, h2, h3, h4, .ui.header {
  color: var(--bt-pink);
}

/* dashboard feed (round 3+4): actor is reliably the first link in each
   row (feeds.tmpl always renders it first) - pink. Repo/branch/PR-ref
   links in the same sentence are bare <a> with no distinguishing class
   (checked the real locale strings, e.g. "pushed to <a>%[3]s</a> at
   <a>%[4]s</a>" - no way to tell branch from repo in CSS), so they fall
   through to Forgejo's own stock `a{color:var(--color-primary)}` = blue.
   Icons ARE distinguishable by their octicon-* class and are tinted by
   meaning: push=mint, create-branch=blue, PR/merge=purple, issue=yellow.
   CI check/cross (.text.green/.text.red) are untouched - they already
   read --color-thin-green/-red, independent of --color-green/-red. */
.flex-item-main > div:first-child > a:first-child {
  color: var(--bt-pink);
}
.flex-item-trailing svg[class*="octicon-git-commit"],
.flex-item-trailing svg[class*="octicon-repo-push"] {
  color: var(--bt-mint) !important;
}
.flex-item-trailing svg[class*="octicon-git-branch"] {
  color: var(--bt-blue) !important;
}
.flex-item-trailing svg[class*="octicon-git-pull-request"],
.flex-item-trailing svg[class*="octicon-git-merge"] {
  color: var(--bt-purple) !important;
}
.flex-item-trailing svg[class*="octicon-issue"] {
  color: var(--bt-yellow) !important;
}