/*
 * Athenio brand layer for Forgejo 15.0.11 (pinned). Loaded after the theme by
 * custom/templates/custom/header.tmpl, so it only overrides Forgejo's CSS variables and a few
 * selectors. Semantic colors (success, danger, warning, diff, code review) are left alone.
 *
 * Palette: deep teal #0F3D3E, secondary #1F4E5F, accent teal #4FD1C5, paper #EDF2F2, ink #0F1D1D.
 * Light themes use the deep teal as the primary, dark themes the accent teal. The navbar is deep
 * teal in both, like HQ's sidebar.
 *
 * "forgejo-auto" is the light theme plus a prefers-color-scheme dark block, so the dark values are
 * written twice: for forgejo-dark, and for forgejo-auto under the media query.
 */

/* ---- Light values (forgejo-light, and forgejo-auto on a light system) ---- */
:root {
  --athenio-base: #0f3d3e;
  --athenio-darker: #000;   /* what the primary "dark-N" steps mix toward */
  --athenio-lighter: #fff;  /* what the primary "light-N" steps mix toward */
  --athenio-focus: #0f3d3e;
  --athenio-link: #0d6a6c;  /* links need to stand out from the near-black text; the deep teal does not */
  --color-primary-contrast: #fff;
  --color-accent: #1f4e5f;
  --color-selection-bg: #b6ebe5;
  --color-selection-fg: #0f1d1d;
}

/* ---- Dark values: teal-tinted neutrals (Forgejo's "steel" scale) and the accent teal ---- */
:root[data-theme="forgejo-dark"] {
  --steel-900: #0a1414; --steel-850: #0d1919; --steel-800: #101e1e; --steel-750: #142525;
  --steel-700: #1a2f2f; --steel-650: #213a3a; --steel-600: #2c4a4a; --steel-550: #3a5c5c;
  --steel-500: #4a7070; --steel-450: #5a8282; --steel-400: #6b9494; --steel-350: #7fa6a6;
  --steel-300: #93b8b8; --steel-250: #a6c7c7; --steel-200: #bdd6d6; --steel-150: #d2e4e4;
  --steel-100: #e6f0f0;
  --athenio-base: #4fd1c5;
  --athenio-darker: #fff;
  --athenio-lighter: #000;
  --color-primary-contrast: #0f1d1d;
  --color-accent: #4fd1c5;
  --color-selection-bg: #4fd1c5;
  --color-selection-fg: #0f1d1d;
  --athenio-focus: #4fd1c5;
  --athenio-link: #4fd1c5;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="forgejo-auto"] {
    --steel-900: #0a1414; --steel-850: #0d1919; --steel-800: #101e1e; --steel-750: #142525;
    --steel-700: #1a2f2f; --steel-650: #213a3a; --steel-600: #2c4a4a; --steel-550: #3a5c5c;
    --steel-500: #4a7070; --steel-450: #5a8282; --steel-400: #6b9494; --steel-350: #7fa6a6;
    --steel-300: #93b8b8; --steel-250: #a6c7c7; --steel-200: #bdd6d6; --steel-150: #d2e4e4;
    --steel-100: #e6f0f0;
    --athenio-base: #4fd1c5;
    --athenio-darker: #fff;
    --athenio-lighter: #000;
    --color-primary-contrast: #0f1d1d;
    --color-accent: #4fd1c5;
    --color-selection-bg: #4fd1c5;
    --color-selection-fg: #0f1d1d;
    --athenio-focus: #4fd1c5;
    --athenio-link: #4fd1c5;
  }
}

/* ---- The primary scale, built from the values above for every theme ---- */
:root {
  --color-primary: var(--athenio-base);
  --color-primary-dark-1: color-mix(in srgb, var(--athenio-base) 94%, var(--athenio-darker));
  --color-primary-dark-2: color-mix(in srgb, var(--athenio-base) 86%, var(--athenio-darker));
  --color-primary-dark-3: color-mix(in srgb, var(--athenio-base) 78%, var(--athenio-darker));
  --color-primary-dark-4: color-mix(in srgb, var(--athenio-base) 70%, var(--athenio-darker));
  --color-primary-dark-5: color-mix(in srgb, var(--athenio-base) 62%, var(--athenio-darker));
  --color-primary-dark-6: color-mix(in srgb, var(--athenio-base) 54%, var(--athenio-darker));
  --color-primary-dark-7: color-mix(in srgb, var(--athenio-base) 46%, var(--athenio-darker));
  --color-primary-light-1: color-mix(in srgb, var(--athenio-base) 88%, var(--athenio-lighter));
  --color-primary-light-2: color-mix(in srgb, var(--athenio-base) 76%, var(--athenio-lighter));
  --color-primary-light-3: color-mix(in srgb, var(--athenio-base) 62%, var(--athenio-lighter));
  --color-primary-light-4: color-mix(in srgb, var(--athenio-base) 48%, var(--athenio-lighter));
  --color-primary-light-5: color-mix(in srgb, var(--athenio-base) 32%, var(--athenio-lighter));
  --color-primary-light-6: color-mix(in srgb, var(--athenio-base) 18%, var(--athenio-lighter));
  --color-primary-light-7: color-mix(in srgb, var(--athenio-base) 8%, var(--athenio-lighter));
  --color-primary-alpha-10: color-mix(in srgb, var(--athenio-base) 10%, transparent);
  --color-primary-alpha-20: color-mix(in srgb, var(--athenio-base) 20%, transparent);
  --color-primary-alpha-30: color-mix(in srgb, var(--athenio-base) 30%, transparent);
  --color-primary-alpha-40: color-mix(in srgb, var(--athenio-base) 40%, transparent);
  --color-primary-alpha-50: color-mix(in srgb, var(--athenio-base) 50%, transparent);
  --color-primary-alpha-60: color-mix(in srgb, var(--athenio-base) 60%, transparent);
  --color-primary-alpha-70: color-mix(in srgb, var(--athenio-base) 70%, transparent);
  --color-primary-alpha-80: color-mix(in srgb, var(--athenio-base) 80%, transparent);
  --color-primary-alpha-90: color-mix(in srgb, var(--athenio-base) 90%, transparent);
  --color-primary-hover: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-dark-4);

  /* The page's own text colors, kept for the dropdowns inside the navbar, see below. */
  --athenio-page-text: var(--color-text);
  --athenio-page-text-light: var(--color-text-light);
  --athenio-page-text-light-2: var(--color-text-light-2);
  --athenio-page-text-light-3: var(--color-text-light-3);
}

/* ---- Links ---- */
a { color: var(--athenio-link); }
a:hover { color: var(--color-primary-hover); }

/* ---- Navbar: deep teal with light text in every theme ---- */
#navbar {
  --color-nav-bg: #0f3d3e;
  --color-nav-hover-bg: #1f4e5f;
  --color-text: #f4f7f7;
  --color-text-light: #d9e6e6;
  --color-text-light-2: #c2d6d6;
  --color-text-light-3: #adc6c6;
  --athenio-focus: #4fd1c5;
  color: var(--color-text);
  border-bottom-color: rgb(79 209 197 / 0.28);
}
#navbar a.item.active { background: rgb(79 209 197 / 0.16); color: #fff; }
/* The dropdowns open on the page's own surface, so they get the page's text back. */
#navbar details.dropdown > .content,
#navbar .ui.dropdown .menu {
  --color-text: var(--athenio-page-text);
  --color-text-light: var(--athenio-page-text-light);
  --color-text-light-2: var(--athenio-page-text-light-2);
  --color-text-light-3: var(--athenio-page-text-light-3);
  --athenio-focus: var(--color-primary);
  color: var(--color-text);
}

/* ---- Visible focus ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--athenio-focus);
  outline-offset: 2px;
}

/* ---- Home page for visitors (custom/templates/home.tmpl) ---- */
.athenio-home {
  display: flex;
  justify-content: center;
  padding: 4rem 1rem;
}
.athenio-hero {
  box-sizing: border-box;
  width: 100%;
  max-width: 40rem;
  padding: 3.5rem 2rem;
  border: 1px solid rgb(79 209 197 / 0.25);
  border-radius: 12px;
  background-color: #0f3d3e;
  /* HQ's dot grid */
  background-image: radial-gradient(rgb(79 209 197 / 0.22) 1px, transparent 1px);
  background-size: 22px 22px;
  color: #edf2f2;
  text-align: center;
}
.athenio-hero .athenio-wordmark {
  display: block;
  width: min(15rem, 70%);
  height: auto;
  margin: 0 auto 2rem;
}
.athenio-hero p { margin: 0 0 1.75rem; font-size: 1.125rem; line-height: 1.5; }
.athenio-hero .athenio-cta {
  display: inline-block;
  padding: 0.7rem 2rem;
  border-radius: 6px;
  background: #4fd1c5;
  color: #0f1d1d;
  font-weight: 600;
}
.athenio-hero .athenio-cta:hover { background: #7fe0d7; color: #0f1d1d; }
.athenio-hero .athenio-contact { margin: 2rem 0 0; font-size: 0.9rem; color: #c2d6d6; }
.athenio-hero .athenio-contact a { color: #4fd1c5; text-decoration: underline; }
.athenio-hero a:focus-visible { outline-color: #4fd1c5; }

/* ---- Sign-in: the wordmark above the form ---- */
.page-content.user.signin .column::before {
  content: "";
  display: block;
  height: 5.5rem;
  border-radius: 6px;
  background: #0f3d3e url("../img/logo-wordmark.svg") center / auto 2.25rem no-repeat;
}