/*
 * site/css/site.css -- this site's colours, header, footer and theme switch: Groundskeeper's
 * docs/css/site.css with the agent colour in place of Groundskeeper's teal (the variable names are
 * kept, so home.css is Groundskeeper's too). Written 2026-09-30.
 */


:root {
  --page: #f1f5f9;
  --card: #ffffff;
  --card-soft: #f8fafc;
  --line: #e2e8f0;
  --ink: #1e293b;
  --inksoft: #475569;
  --inkmuted: #64748b;
  --navy: #1a365d;
  --cyan: #4A7FA7;
  --cyan-ink: #2f6690;
  --cyan-deep: #1f4e79;
  --accent: #3b82f6;
  --accent-hover: #2563eb;

  --hero-bg-top: #e8eef6;
  --hero-bg-bottom: #f1f5f9;
  --hero-grid: rgba(26,54,93,0.06);
  --hero-glow: rgba(74,127,167,0.16);
  --hero-head: #1a365d;
  --hero-head-accent: #2f6690;
  --hero-sub: #475569;
  --hero-pill-bg: rgba(74,127,167,0.1);
  --hero-pill-border: rgba(74,127,167,0.35);
  --hero-pill-text: #1f4e79;

  --term-bg: #0f1f33;
  --term-head: #0b1626;
  --term-border: #26384f;
  --term-text: #cbd5e1;
  --term-muted: #64748b;

  --panel-navy: #1a365d;
  --panel-text: #cbd5e1;
  --panel-label: #94a3b8;

  --shadow-card: 0 4px 20px rgba(26,54,93,0.06);
  --shadow-soft: 0 6px 24px rgba(26,54,93,0.07);
}

[data-theme="dark"] {
  --page: #0B0F1A;
  --card: #131a2a;
  --card-soft: #0f1622;
  --line: #233044;
  --ink: #f1f5f9;
  --inksoft: #cbd5e1;
  --inkmuted: #94a3b8;
  --navy: #1a365d;
  --cyan: #6FA3CC;
  --cyan-ink: #93c5fd;
  --cyan-deep: #bfdbfe;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;

  --hero-bg-top: #0d1424;
  --hero-bg-bottom: #0B0F1A;
  --hero-grid: rgba(255,255,255,0.04);
  --hero-glow: rgba(111,163,204,0.18);
  --hero-head: #ffffff;
  --hero-head-accent: #6FA3CC;
  --hero-sub: #cbd5e1;
  --hero-pill-bg: rgba(111,163,204,0.08);
  --hero-pill-border: rgba(111,163,204,0.3);
  --hero-pill-text: #bfdbfe;

  --term-bg: #0a1322;
  --term-head: #060d18;
  --term-border: #1c2940;

  --panel-navy: #15263f;
  --panel-text: #cbd5e1;
  --panel-label: #94a3b8;

  --shadow-card: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-soft: 0 6px 24px rgba(0,0,0,0.5);
}

.mono { font-family: 'IBM Plex Mono', monospace; }

.nav-bar { background: color-mix(in srgb, var(--card) 90%, transparent); border-color: var(--line); }
.nav-link { color: var(--inkmuted); }
.nav-link:hover { color: var(--ink); }
.brand-name { color: var(--ink); }
.self-host-badge { background: var(--hero-pill-bg); color: var(--hero-pill-text); border: 1px solid var(--hero-pill-border); }
/* The header on one line at tablet widths: "Self-Hosted", "See it" and "RSJ Software" wrapped
   to two lines between the md breakpoint and ~1150px. Tighter gaps there, never a wrap. */
.nav-link, .self-host-badge, .brand-name { white-space: nowrap; }
@media (max-width: 1150px) { header nav.gap-6 { gap: 0.9rem; } }
@media (max-width: 1000px) {
  /* The two outside links as their icons alone; the words stay for screen readers. */
  header nav a[href^="https://"] { font-size: 0; gap: 0; }
}
@media (max-width: 900px) { .self-host-badge { display: none; } }

.text-ink { color: var(--ink); }
.text-inksoft { color: var(--inksoft); }
.text-inkmuted { color: var(--inkmuted); }
.text-cyan-ink { color: var(--cyan-ink); }

.footer { border-top: 1px solid var(--line); background: var(--card); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card-soft);
  color: var(--inksoft); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan-ink); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }