/* ============================================================================
   RSpond brand override for Gitea. Loaded AFTER the active theme file (Gitea
   loads only the current theme's :root file, e.g. theme-gitea-light.css) via
   custom/templates/custom/header.tmpl, so it only re-tints — the base theme
   keeps providing input borders, box colors, surfaces, etc.

   Theme support (light / dark / auto):
   - <html data-theme="gitea-{light,dark,auto}"> marks the active theme.
   - Surfaces/text reference Gitea's own theme vars (--color-body, --color-box-*,
     --color-text*, --color-secondary) so they follow whichever theme is active.
   - The brand greens are funneled through --rspond-green / --rspond-green-bright;
     only those two (plus a lighter primary ramp) are re-pointed for dark, in BOTH
     html[data-theme=gitea-dark] AND gitea-auto under @media prefers-color-scheme.
   Brand: rspond.net — forest green, the signal dot, Literata + DM Sans.
   Fonts: vendor real Literata/DM Sans woff2 into custom/public/assets/fonts/
   and @font-face them; until then these stacks fall back to Georgia / system-ui.
   ============================================================================ */
:root {
  --fonts-regular: "DM Sans", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --rspond-serif: "Literata", Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* Brand greens — the single source of truth. Dark scopes re-point just these.
     Light: rspond.net forest green + bright green. */
  --rspond-green: #336633;
  --rspond-green-bright: #3d8040;

  /* primary brand ramp, derived to read on a LIGHT surface */
  --color-primary: var(--rspond-green);
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #2f5e2f;
  --color-primary-dark-2: #2b552b;
  --color-primary-dark-3: #274d27;
  --color-primary-dark-4: #234523;
  --color-primary-dark-5: #1f3d1f;
  --color-primary-dark-6: #1b351b;
  --color-primary-dark-7: #172d17;
  --color-primary-light-1: #3d773d;
  --color-primary-light-2: #4a854a;
  --color-primary-light-3: #5c945c;
  --color-primary-light-4: #79a879;
  --color-primary-light-5: #9cc09c;
  --color-primary-light-6: #cfe3cf;
  --color-primary-light-7: #e9f0e9;
  --color-primary-alpha-30: rgba(51, 102, 51, .30);
  --color-primary-alpha-40: rgba(51, 102, 51, .40);
  --color-primary-alpha-50: rgba(51, 102, 51, .50);
  --color-primary-alpha-60: rgba(51, 102, 51, .60);
  --color-primary-alpha-70: rgba(51, 102, 51, .70);
  --color-primary-alpha-80: rgba(51, 102, 51, .80);
  --color-primary-alpha-90: rgba(51, 102, 51, .90);
  --color-accent: var(--rspond-green-bright);

  /* Home-page tints, expressed against theme vars so they adapt. Light values
     are a hair of green over the theme surfaces; dark scopes lighten the green. */
  --rspond-pill-bg: var(--color-primary-light-7);
  --rspond-pill-border: var(--color-primary-light-6);
}

/* --- Dark re-point. Applies to explicit dark AND auto-on-a-dark-OS. Only the
   greens + the primary ramp change; surfaces come from Gitea's dark theme. The
   greens are LIGHTENED for AA contrast on Gitea-dark's ~#1b1f23 body. --- */
html[data-theme="gitea-dark"] {
  --rspond-green: #6cc26c;
  --rspond-green-bright: #86d086;
  --color-primary: var(--rspond-green);
  --color-primary-contrast: #10240f;
  --color-primary-dark-1: #7ac97a;
  --color-primary-dark-2: #86d086;
  --color-primary-dark-3: #93d693;
  --color-primary-dark-4: #a0dca0;
  --color-primary-dark-5: #ade2ad;
  --color-primary-dark-6: #bae9ba;
  --color-primary-dark-7: #c7efc7;
  --color-primary-light-1: #5cb35c;
  --color-primary-light-2: #4e9f4e;
  --color-primary-light-3: #438a43;
  --color-primary-light-4: #366f36;
  --color-primary-light-5: #2c5a2c;
  --color-primary-light-6: #244824;
  --color-primary-light-7: #1c381c;
  --color-primary-alpha-30: rgba(108, 194, 108, .30);
  --color-primary-alpha-40: rgba(108, 194, 108, .40);
  --color-primary-alpha-50: rgba(108, 194, 108, .50);
  --color-primary-alpha-60: rgba(108, 194, 108, .60);
  --color-primary-alpha-70: rgba(108, 194, 108, .70);
  --color-primary-alpha-80: rgba(108, 194, 108, .80);
  --color-primary-alpha-90: rgba(108, 194, 108, .90);
  --color-accent: var(--rspond-green-bright);
  --rspond-pill-bg: var(--color-primary-light-7);
  --rspond-pill-border: var(--color-primary-light-6);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="gitea-auto"] {
    --rspond-green: #6cc26c;
    --rspond-green-bright: #86d086;
    --color-primary: var(--rspond-green);
    --color-primary-contrast: #10240f;
    --color-primary-dark-1: #7ac97a;
    --color-primary-dark-2: #86d086;
    --color-primary-dark-3: #93d693;
    --color-primary-dark-4: #a0dca0;
    --color-primary-dark-5: #ade2ad;
    --color-primary-dark-6: #bae9ba;
    --color-primary-dark-7: #c7efc7;
    --color-primary-light-1: #5cb35c;
    --color-primary-light-2: #4e9f4e;
    --color-primary-light-3: #438a43;
    --color-primary-light-4: #366f36;
    --color-primary-light-5: #2c5a2c;
    --color-primary-light-6: #244824;
    --color-primary-light-7: #1c381c;
    --color-primary-alpha-30: rgba(108, 194, 108, .30);
    --color-primary-alpha-40: rgba(108, 194, 108, .40);
    --color-primary-alpha-50: rgba(108, 194, 108, .50);
    --color-primary-alpha-60: rgba(108, 194, 108, .60);
    --color-primary-alpha-70: rgba(108, 194, 108, .70);
    --color-primary-alpha-80: rgba(108, 194, 108, .80);
    --color-primary-alpha-90: rgba(108, 194, 108, .90);
    --color-accent: var(--rspond-green-bright);
    --rspond-pill-bg: var(--color-primary-light-7);
    --rspond-pill-border: var(--color-primary-light-6);
  }
}

/* serif wordmark next to the dot logo in the navbar */
.navbar .brand, #navbar .brand { font-family: var(--rspond-serif); font-weight: 700; letter-spacing: -.01em; }

/* links in brand green, brighten on hover — greens adapt per theme above */
a { color: var(--color-primary); }
a:hover { color: var(--color-accent); }

/* reusable signal dot */
.rspond-dot { display:inline-block; width:.5em; height:.5em; border-radius:50%;
  background: var(--color-accent); vertical-align:.28em; margin-right:.1em; }

/* ============================ Editorial Forest home ========================
   Surfaces come from Gitea theme vars so the hero + cards follow light/dark. */
.rspond-home { background:
  linear-gradient(180deg, var(--color-body), var(--color-box-body)); }
.rspond-hero { max-width: 960px; margin: 0 auto; padding: clamp(30px,6vw,64px) 20px; }
.rspond-pill { display:inline-flex; align-items:center; gap:.5em; font-size:13px;
  color: var(--color-primary); background: var(--rspond-pill-bg);
  border: 1px solid var(--rspond-pill-border); border-radius: 999px; padding: 5px 13px; font-weight: 600; }
.rspond-title { font-family: var(--rspond-serif); font-weight: 700;
  font-size: clamp(30px,6vw,52px); line-height: 1.04; letter-spacing: -.02em;
  color: var(--color-text); margin: 18px 0 12px; max-width: 16ch; text-wrap: balance; }
.rspond-title em { color: var(--color-primary); font-style: italic; }
.rspond-sub { font-size: clamp(16px,2.2vw,19px); color: var(--color-text-light-2); max-width: 54ch; margin: 0 0 24px; }
.rspond-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.rspond-feats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 38px; }
.rspond-feat { background: var(--color-box-body); border: 1px solid var(--color-secondary); border-radius: 12px; padding: 16px 17px; }
.rspond-feat h4 { margin: 0 0 .35em; font-size: 15px; color: var(--color-text); display: flex; align-items: center; gap: .45em; }
.rspond-feat h4::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }
.rspond-feat p { margin: 0; font-size: 13px; color: var(--color-text-light-2); line-height: 1.5; }
@media (max-width: 640px) { .rspond-feats { grid-template-columns: 1fr; } }

/* ============================ Sign-in (Concept B) ==========================
   Editorial Forest login: forest backdrop (same as home, theme-adaptive),
   pulsing dot logo + serif wordmark above a rounded card. Surfaces/borders come
   from the base theme so it works in light/dark/auto. Injected by the
   custom/templates/user/auth/signin.tmpl override; heading text ("Sign In")
   comes from the custom locale override, not this file. */
.rspond-signin { background: linear-gradient(180deg, var(--color-body), var(--color-box-body)); }
.rspond-signin-brand { display: flex; align-items: center; justify-content: center;
  gap: .45em; margin: 4px 0 2px; }
.rspond-signin-logo { display: block; width: 40px; height: 40px; }
.rspond-signin-word { font-family: var(--rspond-serif); font-weight: 700; font-size: 26px;
  letter-spacing: -.01em; color: var(--color-text); }
.rspond-signin .ui.top.attached.header {
  font-family: var(--rspond-serif); font-weight: 700; font-size: 20px;
  border-top-left-radius: 12px; border-top-right-radius: 12px; }
.rspond-signin .ui.attached.segment {
  border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
/* the passkey link sits inside a Fomantic `.ui header` block, which renders it
   large + bold; bring it back to a normal-weight link */
.rspond-signin .signin-passkey { font-size: 14px; font-weight: 400; }