/* manada-dark — custom theme for git.satsang.xyz (Forgejo 16.0)
 *
 * Surface only. Two sources, merged on purpose:
 *   - GitHub: density. Tighter page rhythm, 32px controls, hairlines that
 *     separate instead of panels that shout.
 *   - Linear: restraint. One accent, neutral greys, quiet borders, hover
 *     that moves a single step.
 *
 * HOW THIS STAYS ALIVE ACROSS UPGRADES
 * Every declaration below re-points a CSS custom property that Forgejo 16.0
 * itself defines. No component, class or ID selector is styled here, so an
 * upstream DOM change cannot leave this file painting the wrong thing — it can
 * only make a declaration inert. The three exceptions are the density tokens
 * upstream defines on a narrower selector (:root .small:is(.button,...),
 * :root details.dropdown); those are re-declared on the SAME selector, using
 * the SAME :root wins-by-load-order rule this file already relies on.
 *
 * tests/forgejo-theme-vars.mjs verifies every variable named here against the
 * real 16.0 source and prints its file:line. Run: just theme-check.
 *
 * Deliberately NOT touched: status colours, diff colours, badges, indicators
 * and chroma. They carry information and upstream already tunes them. A theme
 * that recolours "red means removed" is a theme that lies.
 */

:root {
  /* ── Neutral ramp ──────────────────────────────────────────────────────
   * One near-neutral, faintly cool ladder. Surfaces below reference it, so
   * the whole UI has a single palette source instead of blue-grey steel in
   * one corner and warm grey in another. 900 is deepest. */
  --steel-900: #0d0e10;
  --steel-850: #101114;
  --steel-800: #131417;
  --steel-750: #17181c;
  --steel-700: #1c1d21;
  --steel-650: #222429;
  --steel-600: #292b31;
  --steel-550: #32353c;
  --steel-500: #3c4048;
  --steel-450: #474b55;
  --steel-400: #535863;
  --steel-350: #606672;
  --steel-300: #7f8490;
  --steel-250: #8f95a1;
  --steel-200: #a3a8b3;
  --steel-150: #c2c6ce;
  --steel-100: #e6e8ec;

  /* ── The one accent ────────────────────────────────────────────────────
   * Blue, because this instance already shows blue (github-dark is the
   * current default), so the surface work is not also a brand change.
   * Accent means "actionable or selected" and nothing else: links, the
   * primary button, focus rings (via accent-color), selection. */
  --color-primary: #4c8dfb;
  --color-primary-contrast: #0b0c0e;
  /* In a dark theme dark-N walks toward the light, light-N toward the dark. */
  --color-primary-dark-1: #6ba0ff;
  --color-primary-dark-2: #8ab5ff;
  --color-primary-dark-3: #a9caff;
  --color-primary-dark-4: #c8dcff;
  --color-primary-dark-5: #dfeaff;
  --color-primary-dark-6: #eff5ff;
  --color-primary-dark-7: #f7faff;
  --color-primary-light-1: #3b7cf0;
  --color-primary-light-2: #2f6ad6;
  --color-primary-light-3: #2459b3;
  --color-primary-light-4: #1a478f;
  --color-primary-light-5: #12366d;
  --color-primary-light-6: #0d2647;
  --color-primary-light-7: #081729;
  --color-primary-alpha-10: #4c8dfb19;
  --color-primary-alpha-20: #4c8dfb33;
  --color-primary-alpha-30: #4c8dfb4b;
  --color-primary-alpha-40: #4c8dfb66;
  --color-primary-alpha-50: #4c8dfb80;
  --color-primary-alpha-60: #4c8dfb99;
  --color-primary-alpha-70: #4c8dfbb3;
  --color-primary-alpha-80: #4c8dfbcc;
  --color-primary-alpha-90: #4c8dfbe1;
  /* Hover and active each move ONE step, not a shade of everything. */
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-light-2);

  /* Secondary: in Forgejo this is the divider/border token, not a background
   * (navbar underline, card edge, dropdown hover row). One value has to serve
   * both jobs, so it sits just above the surface it sits on. */
  --color-secondary: #2a2c31;
  --color-secondary-dark-1: #32353c;
  --color-secondary-dark-2: #3c4048;
  --color-secondary-dark-3: #474b55;
  --color-secondary-dark-4: #535863;
  --color-secondary-dark-5: #606672;
  --color-secondary-dark-6: #7f8490;
  --color-secondary-dark-7: #8f95a1;
  --color-secondary-dark-8: #a3a8b3;
  --color-secondary-dark-9: #c2c6ce;
  --color-secondary-dark-10: #e6e8ec;
  --color-secondary-dark-11: #e6e8ec;
  --color-secondary-dark-12: #e6e8ec;
  --color-secondary-dark-13: #e6e8ec;
  --color-secondary-light-1: #222429;
  --color-secondary-light-2: #1c1d21;
  --color-secondary-light-3: #17181c;
  --color-secondary-light-4: #131417;
  --color-secondary-alpha-10: #ffffff08;
  --color-secondary-alpha-20: #ffffff0f;
  --color-secondary-alpha-30: #ffffff17;
  --color-secondary-alpha-40: #ffffff1f;
  --color-secondary-alpha-50: #ffffff26;
  --color-secondary-alpha-60: #ffffff2e;
  --color-secondary-alpha-70: #ffffff3d;
  --color-secondary-alpha-80: #ffffff4b;
  --color-secondary-alpha-90: #ffffff59;
  --color-secondary-hover: var(--color-secondary-light-1);
  --color-secondary-active: var(--color-secondary-light-2);

  /* ── Surfaces ──────────────────────────────────────────────────────────
   * Three steps only: page, panel, raised. Depth is carried by a hairline,
   * not by a stack of greys. */
  --color-body: var(--steel-800);
  --color-box-header: var(--steel-700);
  --color-box-body: var(--steel-750);
  --color-box-body-highlight: var(--steel-650);
  --color-header-wrapper: var(--steel-850);
  --color-header-wrapper-transparent: #242d3800;
  --color-footer: var(--steel-900);
  --color-nav-bg: var(--steel-900);
  --color-nav-hover-bg: var(--steel-650);
  --color-secondary-nav-bg: var(--color-body);
  --color-menu: var(--steel-700);
  --color-card: var(--steel-700);
  --color-secondary-bg: var(--steel-700);
  --fancy-card-bg: var(--steel-650);
  --fancy-card-border: var(--steel-600);

  /* ── Type ──────────────────────────────────────────────────────────────
   * Four greys, each with a job. text is the reading colour, -1 is UI
   * labels, -2 is metadata, -3 is placeholder/legal. All clear 4.5:1 on
   * every surface above except -3, which clears it on body and panel. */
  --color-text: var(--steel-100);
  --color-text-dark: #fff;
  --color-text-light: var(--steel-150);
  --color-text-light-1: var(--steel-150);
  --color-text-light-2: var(--steel-200);
  --color-text-light-3: var(--steel-300);
  --color-text-focus: #fff;
  --color-placeholder-text: var(--color-text-light-3);
  --color-caret: var(--color-text);

  /* ── Controls ────────────────────────────────────────────────────────── */
  --color-input-text: var(--steel-100);
  --color-input-background: var(--steel-650);
  --color-input-toggle-background: var(--steel-650);
  --color-input-border: var(--steel-550);
  --color-input-border-hover: var(--steel-450);
  --color-button: var(--steel-600);
  --color-hover: var(--steel-600);
  --color-active: var(--steel-650);
  /* The hairline. Faint enough to recede, solid enough to find. */
  --color-light-border: #ffffff17;
  --color-light: #00000028;
  --color-expand-button: #2c2f35;
  --color-shadow: #00000080;
  --color-overlay-backdrop: #080808c0;
  --color-selection-bg: var(--steel-100);
  --color-selection-fg: var(--color-pure-black);

  /* ── Code and diffs ──────────────────────────────────────────────────── */
  --color-code-bg: var(--steel-750);
  --color-markup-code-block: var(--steel-800);
  --color-markup-code-inline: var(--steel-850);
  --color-editor-line-highlight: var(--steel-700);

  /* ── Labels, reactions, hints ─────────────────────────────────────────── */
  --color-label-text: var(--color-text);
  --color-label-bg: var(--steel-600);
  --color-label-hover-bg: var(--steel-550);
  --color-label-active-bg: var(--steel-500);
  --color-label-bg-alt: var(--steel-550);
  --color-reaction-bg: #ffffff0f;
  --color-reaction-active-bg: var(--color-primary-alpha-30);
  --color-reaction-hover-bg: var(--color-primary-alpha-40);
  --color-tooltip-text: #ffffff;
  --color-tooltip-bg: #000000f0;
  --color-accent: var(--color-primary);
  --color-small-accent: var(--color-primary-dark-2);
  --color-highlight-fg: var(--color-primary-dark-4);
  --color-highlight-bg: var(--color-primary-alpha-20);
  --color-timeline: var(--steel-650);
  --color-project-board-bg: var(--color-secondary-light-3);
  --color-project-board-dark-label: var(--color-text-light-3);

  --is-dark-theme: true;
  --color-pure-black: #000000;

  /* ── Density (GitHub) ──────────────────────────────────────────────────
   * Page rhythm 16/12/8 instead of 16/16/8, and the responsive margin
   * ladder is repeated: this file loads after index.css, so a bare
   * :root value would win at every breakpoint, including a phone. */
  --page-margin-x: 24px;
  --page-spacing: 12px;
  --button-spacing: 0.25rem;
  --button-min-height: 32px;
  --button-padding-inline: 0.85rem;
  --dropdown-item-min-height: 30px;
  --border-radius: 6px;
  --border-radius-medium: 8px;
  --line-height-default: 1.5;

  color-scheme: dark;
  accent-color: var(--color-accent);
}

@media (min-width: 768px) and (max-width: 1200px) {
  :root {
    --page-margin-x: 16px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --page-margin-x: 8px;
  }
}

/* Touch gets its size back. Upstream widens the same tokens under this query;
 * without repeating it here the desktop values would win on a phone. */
@media (pointer: coarse) {
  :root {
    --button-spacing: 0.5rem;
    --button-min-height: 40px;
  }

  :root details.dropdown {
    --dropdown-item-min-height: 40px;
  }
}

/* The small control variant is defined on a narrower selector upstream, so it
 * is re-declared here on that same selector to stay in step with the base. */
:root .small:is(.button, .button-row, .button-sequence) {
  --button-min-height: 28px;
  --button-padding-inline: 0.7rem;
}

@media (pointer: coarse) {
  :root .small:is(.button, .button-row, .button-sequence) {
    --button-min-height: 36px;
  }
}