/*
 * Colidal branding for Forgejo. Loaded on every page by templates/custom/header.tmpl.
 *
 * Colours follow colidal.com (Tailwind):
 *   - Light mode: deep purple (purple-700) buttons and links. Forgejo's own light theme uses the
 *     Tailwind orange scale in the same steps, so each orange step is swapped for the purple step.
 *   - Dark mode: vivid purple-600 buttons with white text, links in purple-400, and Forgejo's
 *     blue-grey "steel" backgrounds replaced with the near-black navy greys colidal.com uses.
 * Fonts: self-hosted (no Google requests). Manrope for headings, IBM Plex Sans for body text.
 * Both are SIL Open Font License 1.1; see ../fonts/FONTS.md.
 *
 * Only CSS variables and a few element rules are overridden. No Forgejo templates are replaced,
 * so upgrades are safe. Bump ?v= in header.tmpl after editing so browsers fetch the new file.
 */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --fonts-proportional: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

h1, h2, h3, h4, .ui.header {
  font-family: "Manrope", var(--fonts-proportional);
}

/* Signed-out visitors (the navbar has a "Sign in" link) see only the logo: every signed-out
   page redirects to the sign-in form anyway, so the navbar's own Sign in button is redundant.
   Forgejo has no setting for this; signed-in users keep Explore and Help. */
#navbar:has(a[href^="/user/login"]) a[href^="/explore"],
#navbar:has(a[href^="/user/login"]) a[href^="https://forgejo.org/docs"],
#navbar a[href^="/user/login"] {
  display: none !important;
}

/* Footer: English is the only language (LANGS = en-US), so the picker is pointless.
   licenses.txt stays served (third-party license notices for the browser code), but unlinked. */
footer .ui.dropdown.language,
footer a[href="/assets/licenses.txt"] {
  display: none !important;
}

/* ---------- Light: forgejo-light, and forgejo-auto when the OS is in light mode ---------- */
html[data-theme="forgejo-light"],
html[data-theme="forgejo-auto"] {
  --color-primary: #7e22ce;          /* purple-700 */
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #7e22ce;   /* 700 */
  --color-primary-dark-2: #6b21a8;   /* 800 */
  --color-primary-dark-3: #6b21a8;
  --color-primary-dark-4: #581c87;   /* 900 */
  --color-primary-dark-5: #581c87;
  --color-primary-dark-6: #581c87;
  --color-primary-dark-7: #581c87;
  --color-primary-light-1: #9333ea;  /* 600 */
  --color-primary-light-2: #a855f7;  /* 500 */
  --color-primary-light-3: #c084fc;  /* 400 */
  --color-primary-light-4: #d8b4fe;  /* 300 */
  --color-primary-light-5: #e9d5ff;  /* 200 */
  --color-primary-light-6: #f3e8ff;  /* 100 */
  --color-primary-light-7: #faf5ff;  /* 50 */
  --color-primary-alpha-10: #7e22ce19;
  --color-primary-alpha-20: #7e22ce33;
  --color-primary-alpha-30: #7e22ce4b;
  --color-primary-alpha-40: #7e22ce66;
  --color-primary-alpha-50: #7e22ce80;
  --color-primary-alpha-60: #7e22ce99;
  --color-primary-alpha-70: #7e22ceb3;
  --color-primary-alpha-80: #7e22cecc;
  --color-primary-alpha-90: #7e22cee1;
}

/* ---------- Dark: forgejo-dark always, forgejo-auto when the OS is in dark mode ----------
   The same block appears twice (CSS can't share it between a selector and a media query). */
html[data-theme="forgejo-dark"] {
  /* Backgrounds and text: steel (blue-grey) -> colidal.com's Tailwind gray (navy-black) */
  --steel-100: #e5e7eb; --steel-150: #d1d5db; --steel-200: #c4c9d1; --steel-250: #b0b6c0;
  --steel-300: #9ca3af; --steel-350: #868d99; --steel-400: #6b7280; --steel-450: #5b6371;
  --steel-500: #4b5563; --steel-550: #414a59; --steel-600: #374151; --steel-650: #2b3443;
  --steel-700: #1f2937; --steel-750: #18212f; --steel-800: #111827; --steel-850: #0b111e;
  --steel-900: #030712;
  /* Buttons: vivid purple-600 with white text, brightening on hover */
  --color-primary: #9333ea;          /* purple-600 */
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #a855f7;   /* 500 */
  --color-primary-dark-2: #a855f7;
  --color-primary-dark-3: #c084fc;   /* 400 */
  --color-primary-dark-4: #c084fc;
  --color-primary-dark-5: #d8b4fe;   /* 300 */
  --color-primary-dark-6: #d8b4fe;
  --color-primary-dark-7: #e9d5ff;   /* 200 */
  --color-primary-light-1: #7e22ce;  /* 700 */
  --color-primary-light-2: #6b21a8;  /* 800 */
  --color-primary-light-3: #581c87;  /* 900 */
  --color-primary-light-4: #3b0764;  /* 950 */
  --color-primary-light-5: #3b0764;
  --color-primary-light-6: #2e0550;
  --color-primary-light-7: #2e0550;
  --color-primary-alpha-10: #9333ea19;
  --color-primary-alpha-20: #9333ea33;
  --color-primary-alpha-30: #9333ea4b;
  --color-primary-alpha-40: #9333ea66;
  --color-primary-alpha-50: #9333ea80;
  --color-primary-alpha-60: #9333ea99;
  --color-primary-alpha-70: #9333eab3;
  --color-primary-alpha-80: #9333eacc;
  --color-primary-alpha-90: #9333eae1;
}
/* Links use --color-primary; purple-600 is too dark to read on navy, so plain links get
   purple-400. :where() keeps this at the same specificity as Forgejo's own `a` rule. */
:where(html[data-theme="forgejo-dark"]) a { color: #c084fc; }

@media (prefers-color-scheme: dark) {
  html[data-theme="forgejo-auto"] {
    --steel-100: #e5e7eb; --steel-150: #d1d5db; --steel-200: #c4c9d1; --steel-250: #b0b6c0;
    --steel-300: #9ca3af; --steel-350: #868d99; --steel-400: #6b7280; --steel-450: #5b6371;
    --steel-500: #4b5563; --steel-550: #414a59; --steel-600: #374151; --steel-650: #2b3443;
    --steel-700: #1f2937; --steel-750: #18212f; --steel-800: #111827; --steel-850: #0b111e;
    --steel-900: #030712;
    --color-primary: #9333ea;
    --color-primary-contrast: #ffffff;
    --color-primary-dark-1: #a855f7;
    --color-primary-dark-2: #a855f7;
    --color-primary-dark-3: #c084fc;
    --color-primary-dark-4: #c084fc;
    --color-primary-dark-5: #d8b4fe;
    --color-primary-dark-6: #d8b4fe;
    --color-primary-dark-7: #e9d5ff;
    --color-primary-light-1: #7e22ce;
    --color-primary-light-2: #6b21a8;
    --color-primary-light-3: #581c87;
    --color-primary-light-4: #3b0764;
    --color-primary-light-5: #3b0764;
    --color-primary-light-6: #2e0550;
    --color-primary-light-7: #2e0550;
    --color-primary-alpha-10: #9333ea19;
    --color-primary-alpha-20: #9333ea33;
    --color-primary-alpha-30: #9333ea4b;
    --color-primary-alpha-40: #9333ea66;
    --color-primary-alpha-50: #9333ea80;
    --color-primary-alpha-60: #9333ea99;
    --color-primary-alpha-70: #9333eab3;
    --color-primary-alpha-80: #9333eacc;
    --color-primary-alpha-90: #9333eae1;
  }
  :where(html[data-theme="forgejo-auto"]) a { color: #c084fc; }
}