/* Office-Ready Git: design tokens, in the Tokenova palette (trytokenova.com)
   Layout concept: a transit map for Git. The left rail is the line map (days are stations),
   commit graphs are metro lines with station dots, and HEAD is the mint "You are here" marker.
   Theme policy: dark-first. The brand's dark teal look is the default for everyone;
   the light variant (same purple / teal / mint family) applies only when the viewer
   explicitly chooses light (data-theme="light").
   Brand sources: background #002924, primary #7E68EE, teal #00A8C2, mint #83C9C2,
   card slate rgba(54,67,73,.8), border #4C5E67, secondary text #CAD1D8. */
:root {
  color-scheme: dark;

  /* surfaces & ink */
  --paper: #002924;          /* brand background */
  --panel: #2d3f43;          /* brand card (slate at 80% over the section tint) */
  --panel-2: #0b2e2b;        /* brand section tint: sunken areas, code chips */
  --ink: #ffffff;
  --ink-2: #cad1d8;          /* brand secondary text */
  --muted: #aab5be;
  --rule: #2f4a4e;
  --rule-strong: #4c5e67;    /* brand border */

  /* accent = brand purple */
  --accent: #6f58e6;         /* fills: brand purple #7E68EE deepened a touch so white button text passes AA (5:1) */
  --accent-ink: #ffffff;     /* text on accent fills */
  --accent-text: #b0a2f8;    /* links and accent-coloured text on paper/panels */
  --accent-soft: #1d3250;    /* purple tint over the teal ground (brand icon wells) */
  --brand-gradient: linear-gradient(90deg, #7e68ee 0%, #00a8c2 55%, #83c9c2 100%);

  /* "You are here" (HEAD) = brand mint */
  --signal: #83c9c2;
  --signal-ink: #002924;
  --focus: #83c9c2;

  /* metro lines (branches) */
  --l-main: #00a8c2;         /* brand teal: the trunk */
  --l-feature: #9a88f2;      /* brand purple, lifted for the dark ground: your work */
  --l-team: #f5b454;         /* teammates */
  --l-fix: #ff7a6e;          /* hotfix / fix */
  --l-release: #6ccb70;      /* release lines and tags */
  --l-remote: #8fa3ad;
  --on-line: #002924;        /* text on a filled line-colour pill */

  /* semantic (brand success / warning / error, tuned for the dark ground) */
  --ok: #6ccb70;
  --ok-soft: #10392a;
  --warn: #ffb547;
  --warn-soft: #3a2e12;
  --bad: #ff7a6e;
  --bad-soft: #3e1d1c;
  --info: #b0a2f8;
  --info-soft: #1d3250;

  /* terminal (dark in both themes) */
  --term-bg: #001b18;
  --term-fg: #d9e4e2;
  --term-dim: #8fa6a2;
  --term-prompt: #b0a2f8;
  --term-cmd: #f2f6f5;
  --term-ok: #7edb8a;
  --term-err: #ff8a80;
  --term-hint: #5ed0e0;

  /* type */
  --font-display: "Overpass", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Overpass Mono", "Cascadia Mono", Consolas, ui-monospace, "SFMono-Regular", monospace;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --lh-body: 1.6;
  --measure: 68ch;

  /* shape & space */
  --r-sm: 4px;
  --r-md: 6px;
  --r-pill: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Light variant: only when the viewer explicitly picks light. */
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f3f8f7;
  --panel: #ffffff;
  --panel-2: #e6f0ee;
  --ink: #002924;
  --ink-2: #2e4a4f;
  --muted: #55696f;
  --rule: #d3e1df;
  --rule-strong: #a3b8b6;
  --accent: #6a55e0;
  --accent-ink: #ffffff;
  --accent-text: #5a45d0;
  --accent-soft: #ece8fd;
  --signal: #83c9c2;
  --signal-ink: #002924;
  --focus: #6a55e0;
  --l-main: #007c91;
  --l-feature: #6a55e0;
  --l-team: #9c5c00;
  --l-fix: #c62f3a;
  --l-release: #2e7d32;
  --l-remote: #6f838c;
  --on-line: #ffffff;
  --ok: #2e7d32;
  --ok-soft: #e3f2e4;
  --warn: #a65f00;
  --warn-soft: #fff1d6;
  --bad: #c0392b;
  --bad-soft: #fbe3e0;
  --info: #5a45d0;
  --info-soft: #ece8fd;
  --shadow-1: 0 1px 2px rgba(0, 41, 36, 0.06), 0 3px 10px rgba(0, 41, 36, 0.08);
}

/* ---- base ---- */
/* parity with the Artifact host skeleton, so the offline index.html renders the same */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink);
}
p, li { text-wrap: pretty; }
a { color: var(--accent-text); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
code, kbd, pre, samp, .mono { font-family: var(--font-mono); }
code {
  font-size: 0.92em;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}
kbd, .kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 0.05em 0.4em;
  white-space: nowrap;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
::selection { background: var(--accent-soft); color: var(--ink); }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}