/* ============================================================================
   site.css — chrome for THIS site (index.html + gallery.html) only.
   ----------------------------------------------------------------------------
   Not part of the kit. If you fork design-starter you want tokens.css and
   CLAUDE.md; you do not want our publisher bar. It lives in its own file for
   exactly that reason — and so the two pages can't drift apart.

   Everything below still speaks the tokens.css vocabulary. The one exception is
   --agt-signal, and that exception is the point: see the note on it.
   ========================================================================== */

/* --- AGT's identity, applied here and ONLY here ----------------------------
   Agent Dev Thailand's CI is black + green — the colour of the icon. So the
   two pages that carry the AGT name (index.html, gallery.html — the only pages
   that link this file) wear it. This is the storefront; it should look like the
   company, not like the demo palette.

   The trick that keeps this honest: we don't fork tokens.css to do it. We fill
   its six ROLES with AGT's values right here, in the publisher's own stylesheet,
   which loads AFTER tokens.css and so wins the cascade. tokens.css — the file
   you actually fork — stays its neutral default. So a forker gets the KIT's
   colours, not ours, and re-skinning by role is exactly the move the kit teaches.
   That's the whole argument, unchanged: the thing you take away should end up
   looking like YOURS. Ours just happens to look like us.

   Both switch paths mirror tokens.css so the manual toggle still works: the
   media query for OS-driven pages, the [data-theme] attribute for the toggle.
   --agt-signal stays the exact icon green for the mark; --accent is a sibling
   green tuned to clear WCAG AA on ground AND surface, same hue.
   -------------------------------------------------------------------------- */
:root {
  /* black + green — the AGT look, dark by default (see the <html data-theme>) */
  --bg:        #0d0f0a;                 /* near-black with a green cast, not #000 */
  --ink:       #e9ecdf;                 /* warm off-white, faint green, not #fff  */
  --accent:    #b4d16d;                 /* AGT lime — the one accent              */
  --surface:   #15180f;
  --line:      rgb(233 236 223 / 12%);
  --muted:     #9aa389;
  --bg-2:      #101207;
  --surface-2: #1c2014;
  --line-2:    rgb(233 236 223 / 22%);
  --faint:     #6f7860;
  --accent-soft: rgb(180 209 109 / 15%);
  --agt-signal: #A9C66B;                /* the exact icon green, for the mark     */
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #f3f5ea;
    --ink:       #14170d;
    --accent:    #4f6d28;               /* darker olive — AA on the cream ground  */
    --surface:   #fafbf2;
    --line:      rgb(20 23 13 / 14%);
    --muted:     #5e6a49;
    --bg-2:      #eceee0;
    --surface-2: #fdfef7;
    --line-2:    rgb(20 23 13 / 24%);
    --faint:     #828d6d;
    --accent-soft: rgb(79 109 40 / 12%);
    --agt-signal: #5c7333;
  }
}
:root[data-theme="light"] {
  --bg:#f3f5ea; --ink:#14170d; --accent:#4f6d28; --surface:#fafbf2;
  --line:rgb(20 23 13 / 14%); --muted:#5e6a49; --bg-2:#eceee0; --surface-2:#fdfef7;
  --line-2:rgb(20 23 13 / 24%); --faint:#828d6d; --accent-soft:rgb(79 109 40 / 12%);
  --agt-signal:#5c7333;
}

/* --- the page column ------------------------------------------------------
   The gutter that keeps text off the screen edge. It lives here, not in a
   page's <style>, because both pages need it and only one of them had it —
   the splash shipped with zero side padding and Thai running into the bezel
   on a phone. A rule two files depend on cannot live inside one of them.
   Pages narrow the max-width; nobody redefines the padding.
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%; max-width: 1080px; margin-inline: auto;
  padding-inline: var(--space);
}

.by { border-bottom: 1px solid var(--line); padding: 16px 0; }
/* Each page sets its own .wrap width (760 on the splash, 1080 on the
   gallery) — the bar should follow it, but never inherit its vertical padding. */
.by .wrap { display: flex; align-items: center; gap: 10px; padding-top: 0; padding-bottom: 0; }
.by a {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.mark { height: 26px; width: auto; display: block; }
.mark .letter { fill: currentColor; }        /* takes the ground, both themes */
.mark .bar    { fill: var(--agt-signal); }   /* the only branded pixel here   */

/* Mono, not a UI bold. The system-bold fallback read as stock AI sans, and
   AGT's own identity is terminal-leaning — so mono is the honest choice. */
.wordmark {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .02em; line-height: var(--lh-heading);
}
.by .from {
  margin-left: auto; color: var(--faint); font-size: 12px;
  font-family: var(--font-mono);
}
.by .from a { color: var(--muted); display: inline; }
.by .from a:hover { color: var(--ink); }

@media (max-width: 480px) { .by .wordmark { display: none; } }

/* --- the sign-off: a real brand moment ------------------------------------
   The footer used to be one dim line of text. But the whole pitch of this kit
   is "it came from someone who sweats craft" — so the page should CLOSE on the
   mark at a size you can actually read, the way Coda / Structured / Zellerfeld
   close theirs. Shared here (not per-page) for the same reason .by is: the two
   pages must sign off identically and can't be allowed to drift.

   Still one accent. --agt-signal lives on the crossbar and nowhere else; every
   other value is a tokens.css role. A fork that swaps --accent gets a footer in
   its own colour for free, and the green stays the publisher's, not the kit's.
   -------------------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); margin-top: 5rem; }
.site-foot .wrap {
  display: grid; gap: 2.2rem 3rem;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  padding-block: 2.8rem 2.6rem; align-items: start;
}
.foot-brand { display: flex; align-items: flex-start; gap: 14px; }
/* big enough to read the wordmark, small enough not to shout. The crossbar was
   already thickened for small sizes; at 46px it reads clean either way. */
.foot-brand .mark { height: 46px; }
.foot-brand .wordmark {
  display: block; font-size: 15px; margin: 3px 0 .5rem;
}
.foot-tag { color: var(--muted); font-size: 14px; margin: 0; max-width: 32ch; }
.foot-cols {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 1.5rem 2.4rem; justify-content: start;
}
.foot-col { display: flex; flex-direction: column; gap: .55rem; }
.foot-col .eyebrow { margin-bottom: .15rem; }
/* meta text is --muted, links go to --ink on hover. No accent down here — the
   accent is a state colour and a footer has no active state to point at. */
.foot-col a, .foot-col span:not(.eyebrow) {
  color: var(--muted); font-size: 13px; text-decoration: none; line-height: var(--lh-heading);
}
.foot-col a { width: fit-content; }
.foot-col a:hover { color: var(--ink); }
.foot-legal {
  grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.4rem;
  color: var(--faint); font-size: 12.5px;
}
.foot-legal a { color: var(--muted); }
.foot-legal a:hover { color: var(--ink); }
@media (max-width: 700px) {
  .site-foot .wrap { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 380px) {
  .foot-cols { grid-template-columns: repeat(2, auto); }
}