/* ============================================================
   Syndie · V9 tokens
   Reference: Arcade (arcade.software) — "one saturated colour
   flowing like liquid across white paper, every interactive
   element switched on." Translated to Syndie green.

   Fundamentals held from V8 (unchanged by direction):
     · 3px corner radius, one value
     · green-only gradients, background fields only
     · the copy

   Taken from Arcade:
     · the inset hero panel with a liquid flow corner to corner
     · one rationed accent doing accent + CTA + focus
     · neutral ramp for everything else, gray-on-white blocks
     · tighter negative tracking as display size grows
     · denser micro-spacing (8/12px), cool-tinted shadows
   ============================================================ */

:root {
  /* Neutral ramp */
  --paper: #FFFFFF;
  --fog-50: #F9FAF9;     /* page canvas */
  --fog-100: #F2F5F2;    /* alternate section */
  --mist-200: #E6E9E6;   /* hairline */
  --smoke-300: #D6DBD7;  /* stronger border */
  --ink: #111814;
  --black: #070907;

  /* Text — all verified on paper */
  --slate-700: #333D37;  /* subheadings          10.6:1 */
  --slate-600: #4B5851;  /*  7.6:1  body text            */
  --slate-500: #6E756F;  /*  4.9:1  muted, placeholder   */
  --slate-400: #8A918C;  /*  3.6:1  LARGE display only   */
  --on-dark: #F2F5F2;
  --on-dark-2: #A6ADA8;

  /* The one accent. Nothing else is coloured. */
  --green: #1B7A45;      /* 5.4:1 on paper — CTA, focus, accent */
  --green-deep: #0F5730;
  --green-vivid: #24A35B;
  --green-pale: #EAF4EB;
  --green-ink: #12331F;
  --lime: #B9E14C;       /* highlight marker only */

  /* The signature: a liquid green flow, pale corner to deep corner */
  --flow:
    radial-gradient(72% 62% at 102% 110%, #093F23 0%, rgba(9,63,35,0) 56%),
    radial-gradient(66% 58% at 88% 94%, #12683A 0%, rgba(18,104,58,0) 60%),
    radial-gradient(62% 56% at 68% 80%, #2C9A5B 0%, rgba(44,154,91,0) 64%),
    radial-gradient(58% 54% at 46% 64%, #79C58F 0%, rgba(121,197,143,0) 68%),
    radial-gradient(56% 52% at 22% 40%, #D2EBD8 0%, rgba(210,235,216,0) 72%),
    linear-gradient(132deg, #FFFFFF 0%, #FAFDFA 20%, #E9F6EC 42%, #C6E5CF 66%, #86C79C 100%);
  /* Soft version for light panels */
  --flow-soft:
    radial-gradient(80% 72% at 92% 100%, rgba(27,139,76,.34) 0%, rgba(27,139,76,0) 62%),
    radial-gradient(72% 64% at 46% 76%, rgba(88,190,125,.30) 0%, rgba(88,190,125,0) 66%),
    linear-gradient(134deg, #FCFDFC 0%, #F1F8F2 46%, #DDEFE1 100%);

  /* Status */
  --ok: #1B6B3B;    --ok-soft: #E8F2E9;
  --warn: #855A0C;  --warn-soft: #F5EEDA;
  --bad: #98301B;   --bad-soft: #F6E9E4;

  /* Shape */
  --r: 3px;

  /* Shadows, tinted toward the accent's hue */
  --sh-sm: 0 1px 2px rgba(16,40,26,.07);
  --sh-md: 0 8px 24px rgba(16,40,26,.08);
  --sh-lg: 0 24px 60px rgba(16,40,26,.15);

  /* Type */
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;

  --t-caption: 12px;
  --t-sm: 13.5px;
  --t-body: 15px;
  --t-sub: 18px;
  --t-h3: 22px;
  --t-h2: clamp(29px, 3.5vw, 41px);
  --t-h1: clamp(42px, 5.2vw, 72px);
  --t-mega: clamp(46px, 6.2vw, 86px);

  /* Spacing — Arcade's density: 8/12 micro, 32–48 between blocks */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 96px;

  --z-base: 1; --z-sticky: 100; --z-overlay: 200;
  --page: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--fog-50); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6;
  letter-spacing: -0.008em;
}
::selection { background: var(--green-pale); color: var(--green-ink); }
h1, h2, h3 { margin: 0; font-weight: 500; }

/* Tracking tightens as the type scales, per the reference */
.serif { font-family: var(--font-display); font-weight: 500; }
.t-h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.028em; }
.t-h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.022em; }
.t-h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.016em; }
.soft { color: var(--slate-400); }
.dark .soft { color: var(--on-dark-2); }

.mono {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500);
}
.kicker {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green-deep);
  background: var(--green-pale); border-radius: var(--r); padding: 7px 12px;
}
.kicker::before { content: ""; width: 6px; height: 6px; background: var(--green); flex: none; }

/* ---- Buttons: the accent does CTA, and nothing else is coloured ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1;
  border: none; cursor: pointer; text-decoration: none; border-radius: var(--r);
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-accent { background: var(--green); color: #fff; padding: 14px 22px; box-shadow: var(--sh-sm); }
.btn-accent:hover { background: var(--green-deep); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-accent.sm { padding: 11px 17px; font-size: 13.5px; }
.btn-ink { background: var(--ink); color: #fff; padding: 14px 22px; }
.btn-ink:hover { background: #000; transform: translateY(-1px); }
.btn-ink.sm { padding: 11px 17px; font-size: 13.5px; }
.btn-paper { background: var(--paper); color: var(--ink); padding: 13px 21px; border: 1px solid var(--mist-200); box-shadow: var(--sh-sm); }
.btn-paper:hover { border-color: var(--smoke-300); transform: translateY(-1px); }
.btn-paper.sm { padding: 10px 16px; font-size: 13.5px; }
.btn-quiet { background: transparent; color: var(--slate-600); padding: 10px 12px; font-weight: 400; }
.btn-quiet:hover { color: var(--ink); background: var(--fog-100); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

.link-u {
  color: var(--ink); font-weight: 500; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--t-sm);
}
.link-u:hover { color: #000; }
.link-u:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ---- Status: glyph + word, never hue alone ---- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; line-height: 1; border-radius: var(--r); padding: 6px 9px;
}
.tag::before { font-size: 9px; }
.tag-ok   { color: var(--ok);   background: var(--ok-soft); }   .tag-ok::before   { content: "\2713"; }
.tag-warn { color: var(--warn); background: var(--warn-soft); } .tag-warn::before { content: "\25B2"; font-size: 7px; }
.tag-bad  { color: var(--bad);  background: var(--bad-soft); }  .tag-bad::before  { content: "\2715"; }
.tag-mute { color: var(--slate-600); background: var(--fog-100); } .tag-mute::before { content: "\2013"; }

.card { background: var(--paper); border: 1px solid var(--mist-200); border-radius: var(--r); }
.meter { height: 4px; background: var(--mist-200); overflow: hidden; border-radius: 2px; }
.meter i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--green-deep), var(--green-vivid)); transition: width .55s var(--ease); }

/* Reveal — JS opts in, so no-JS and reduced-motion ship visible */
.r-ready { opacity: 0; transform: translateY(14px); }
.r-ready.r-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .r-ready, .r-ready.r-in { opacity: 1; transform: none; transition: none; }
}