/*
 * Colorbase theme for Gitea 1.22.6
 *
 * This file extends Gitea's built-in "gitea-dark" theme: it only overrides
 * the CSS custom properties that base.css / theme-gitea-dark.css already
 * define (verified against the real Gitea v1.22.6 source), plus a handful
 * of explicit selector overrides for elements that don't fully key off
 * those variables (buttons, box headers). It does NOT redeclare Gitea's
 * component CSS, so anything not overridden here just falls back to
 * Gitea's normal dark-theme styling.
 *
 * Deploy at: $GITEA_CUSTOM/public/assets/css/theme-colorbase.css
 * Enable via app.ini:
 *   [ui]
 *   THEMES = gitea-auto,gitea-light,gitea-dark,colorbase
 *   DEFAULT_THEME = colorbase
 */

:root {
  --is-dark-theme: true;
  color-scheme: dark;

  /* --- typography: swap in Montserrat everywhere via the override hook
     base.css already exposes (--fonts-regular: var(--fonts-override, ...)) --- */
  --fonts-override: 'Montserrat', -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;

  /* --- brand primary (purple -> used for links, focus states, primary buttons) --- */
  --color-primary: #a534ff;
  --color-primary-dark-1: #b04eff;
  --color-primary-dark-2: #bc67ff;
  --color-primary-dark-3: #c780ff;
  --color-primary-dark-4: #d49fff;
  --color-primary-dark-5: #e4c3ff;
  --color-primary-dark-6: #f6ecff;
  --color-primary-dark-7: #ffffff;
  --color-primary-light-1: #9a1aff;
  --color-primary-light-2: #8e01ff;
  --color-primary-light-3: #7d00e1;
  --color-primary-light-4: #6700b9;
  --color-primary-light-5: #4d008b;
  --color-primary-light-6: #310058;
  --color-primary-light-7: #140025;

  /* --- secondary (muted navy-purple grey, used for borders/secondary buttons) --- */
  --color-secondary: #3a2d66;
  --color-secondary-dark-1: #2a214a;
  --color-secondary-light-1: #4e3d89;
  --color-secondary-light-2: #5e49a6;

  /* --- page chrome: brand navy instead of Gitea's neutral dark grey --- */
  --color-body: #24195d;
  --color-box-header: #1f1651;
  --color-box-body: #191141;
  --color-nav-bg: #1c1449;
  --color-menu: #1b1345;
  --color-footer: var(--color-nav-bg);
  --color-input-background: #1b1345;
  --color-input-border: var(--color-secondary);
  --color-nav-hover-bg: var(--color-secondary-light-1);

  /* --- text: keep it light/legible on the navy background --- */
  --color-text: #e7e4f5;
  --color-text-light: #cfc9e8;
  --color-text-light-1: #b6aed9;
  --color-text-light-2: #9d93c9;
}

/* Google-font import (only place we still need a plain CSS rule, since
   --fonts-override only swaps the family name, it doesn't load the font). */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Subtle brand gradient on primary buttons site-wide (same treatment as
   the login page, kept consistent rather than flat --color-primary). */
.ui.primary.button,
.ui.primary.buttons .button {
  background: linear-gradient(90deg, #a534ff, #21d2ff) !important;
  border: none !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: linear-gradient(90deg, #9420f0, #0fc2f5) !important;
}

/* Box/segment headers get the same faint navy gradient used on the login
   card, so panels across the site feel like one family. */
.ui.attached.header,
.repository .header,
.ui.top.attached.header {
  background: linear-gradient(180deg, rgba(165, 52, 255, 0.10), rgba(36, 25, 93, 0) 65%), var(--color-box-header);
}

/* Top navbar: tie it to the brand navy and give the active/hover tab a
   thin brand-gradient underline instead of the default flat highlight. */
#navbar {
  background-color: var(--color-nav-bg) !important;
  border-bottom: 1px solid rgba(165, 52, 255, 0.25);
}

#navbar .item:hover,
#navbar .active.item {
  box-shadow: inset 0 -2px 0 0 #a534ff;
}