/* theme-codehub.css — CodeHub's only theme.
   Lifted from flexhub's theme-monochrome.css (git.s8n.ru/s8n/flexhub);
   kept byte-identical apart from the header so upstream fixes port cleanly. */
@import url('/assets/css/theme-forgejo-dark.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Major+Mono+Display&display=swap');

/* Site-wide font override — JetBrains Mono everywhere (matches flexhub-main) */
:root {
  --fonts-proportional: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fonts-monospace:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
html, body, .ui, .ui.menu, .ui.menu .item, .ui.button, .ui.input input,
.ui.dropdown, .ui.dropdown .menu > .item, input, textarea, select, button {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

:root {
  /* CodeHub monochrome — black, white, monospace. No decoration. */

  /* Steel scale: pure neutral grays (zero hue) */
  --steel-900: #0a0a0a;
  --steel-850: #0f0f0f;
  --steel-800: #131313;
  --steel-750: #181818;
  --steel-700: #1d1d1d;
  --steel-650: #232323;
  --steel-600: #2b2b2b;
  --steel-550: #353535;
  --steel-500: #424242;
  --steel-450: #525252;
  --steel-400: #636363;
  --steel-350: #767676;
  --steel-300: #8b8b8b;
  --steel-250: #a0a0a0;
  --steel-200: #b6b6b6;
  --steel-150: #cdcdcd;
  --steel-100: #e6e6e6;

  /* Primary = stark white accent */
  --color-primary: #ffffff;
  --color-primary-contrast: #000000;
  --color-primary-dark-1: #f0f0f0;
  --color-primary-dark-2: #e0e0e0;
  --color-primary-dark-3: #d0d0d0;
  --color-primary-dark-4: #c0c0c0;
  --color-primary-dark-5: #b0b0b0;
  --color-primary-dark-6: #a0a0a0;
  --color-primary-dark-7: #909090;
  --color-primary-light-1: #e6e6e6;
  --color-primary-light-2: #cdcdcd;
  --color-primary-light-3: #b6b6b6;
  --color-primary-light-4: #a0a0a0;
  --color-primary-light-5: #8b8b8b;
  --color-primary-light-6: #767676;
  --color-primary-light-7: #636363;
  --color-primary-alpha-10: #ffffff19;
  --color-primary-alpha-20: #ffffff33;
  --color-primary-alpha-30: #ffffff4b;
  --color-primary-alpha-40: #ffffff66;
  --color-primary-alpha-50: #ffffff80;
  --color-primary-alpha-60: #ffffff99;
  --color-primary-alpha-70: #ffffffb3;
  --color-primary-alpha-80: #ffffffcc;
  --color-primary-alpha-90: #ffffffe1;
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-light-2);

  /* Body / surfaces — pitch black base */
  --color-body: #08080a;
  --color-box-header: #121214;
  --color-box-body: #0e0e10;
  --color-box-body-highlight: #16161a;
  --color-card: #121214;
  --color-menu: #0e0e10;
  --color-header-wrapper: #050507;
  --color-nav-bg: #050507;
  --color-secondary-nav-bg: var(--color-body);
  --color-footer: #050507;
  --color-button: #1d1d1d;
  --color-secondary-bg: #1d1d1d;

  /* Borders / lines */
  --color-input-border: #2a2a2a;
  --color-input-border-hover: #404040;
  --color-light-border: #ffffff1a;

  /* Accent override (chains back to primary) */
  --color-accent: #ffffff;
  --color-small-accent: #b6b6b6;
  --color-highlight-fg: #e6e6e6;
  --color-highlight-bg: #ffffff14;

  /* Reaction / focus */
  --color-text-focus: #ffffff;
  --color-reaction-bg: #ffffff10;
  --color-reaction-active-bg: #ffffff30;
  --color-reaction-hover-bg: #ffffff40;

  /* Selection */
  --color-overlay-backdrop: #000000d0;
}

::selection {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Strip color from primary buttons / labels (override late-cascading rules) */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--color-primary-dark-2) !important;
}
.ui.primary.label,
.ui.primary.labels .label,
.ui.red.label.notification_count {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Top nav: pure black bar, white text */
.ui.secondary.menu .item,
#navbar .item {
  color: var(--color-text) !important;
}

/* Subtle white outline on cards */
.repo-list .item,
.ui.cards > .card,
.ui.card {
  border: 1px solid #1f1f22 !important;
}

/* ── Homepage (custom/templates/home.tmpl) ───────────────────────── */
.codehub-home {
  max-width: 640px;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  text-align: center;
}
.codehub-wordmark {
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #fff;
}
.codehub-wordmark .ch-dot {
  display: inline-block;
  width: 0.14em;
  height: 0.34em;
  background: #fff;
  vertical-align: 0.18em;
  margin: 0 0.16em;
}
.codehub-title {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.codehub-home .tagline { color: var(--color-text-light-2); margin: 0 0 2.5rem; }
.codehub-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.ch-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: 1px solid #fff;
  background: #fff;
  color: #000 !important;
  text-decoration: none !important;
  letter-spacing: 0.06em;
}
.ch-btn:hover { background: var(--color-primary-dark-2); }
.ch-btn-quiet { background: transparent; color: #fff !important; }
.ch-btn-quiet:hover { background: #ffffff1a; }
.codehub-note { margin-top: 3rem; color: var(--color-text-light-3); font-size: 0.85rem; }

/* ── Navbar wordmark (custom/templates/base/head_navbar.tmpl) ────── */
#navbar-logo { display: flex; align-items: center; gap: 0.55rem; }
.codehub-nav-name {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.95rem;
}