/* ============================================================
   Syndie · V3 tokens — Valley (joinvalley.co) language, translated.
   The reference system's rules:
   - White paper canvas with a dotted-grid texture on working areas.
   - Grotesk headings (PP Neue Montreal → Inter Tight), sentence case.
   - Geist Mono is the labeling voice: uppercase, wide tracking,
     square-bullet kickers, bordered caption boxes that end with a period.
   - Black rectangular buttons; underlined utility links.
   - One saturated accent in functional doses (Valley: blue → Syndie: green).
   - Painterly artwork panels carry the emotion; UI floats above them.
   - Dark textured sections for feature storytelling, with a single
     warm gradient rule as the only chromatic flourish (Fluence stops).
   ============================================================ */

:root {
  --paper: #FFFFFF;
  --ink: #101010;
  --gray: #5B5B5B;
  --faint: #96968F;
  --line: #E4E4DF;
  --chipline: #D8D8D2;
  --gridline: #EDEDE7;

  --accent: #1E7A44;
  --accent-soft: #EAF3EE;

  --dark: #0F0F0E;
  --dark-2: #1B1B1A;
  --dark-line: #2C2C2A;
  --on-dark: #F4F4F1;
  --on-dark-2: #8F8F8A;

  /* Fluence stops as the one gradient flourish (per project rule) */
  --rule-grad: linear-gradient(90deg, #B18EDC 0%, #F3C69E 55%, #4C6EE6 100%);

  --ok: #1E7A44;
  --warn: #9A6B12;
  --bad: #A63A22;
  --mute: #6B6B66;

  --r: 6px;
  --r-sm: 4px;

  --font-head: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", Consolas, monospace;

  --page-max: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  letter-spacing: -0.005em;
}

::selection { background: var(--accent-soft); }

.dotgrid {
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 36px 36px;
}

h1, h2, h3, .head { font-family: var(--font-head); font-weight: 500; letter-spacing: -0.025em; margin: 0; }

/* ---- Mono labeling voice ---- */
.mono {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray);
}
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border-radius: var(--r-sm); padding: 7px 12px;
}
.kicker::before { content: "▪"; font-size: 10px; }
.caption-box {
  display: inline-block; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 20px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1;
  border-radius: var(--r); border: none; cursor: pointer; text-decoration: none;
  transition: background .13s ease, border-color .13s ease;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-black { background: var(--ink); color: #fff; padding: 13px 18px; }
.btn-black:hover { background: #2A2A2A; }
.btn-black.sm { padding: 10px 14px; font-size: 13px; }
.btn-line { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 12px 17px; }
.btn-line:hover { background: #F4F4F1; }
.btn-line.sm { padding: 9px 13px; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--ink); padding: 9px 12px; border-radius: var(--r); }
.btn-ghost:hover { background: #F4F4F1; }

.link-u {
  color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-style: dashed; text-decoration-color: var(--faint);
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
}
.link-u:hover { text-decoration-color: var(--ink); text-decoration-style: solid; }
.link-u:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Signal chips (float over artwork) ---- */
.sigchip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.95); border-radius: var(--r-sm);
  padding: 12px 18px; backdrop-filter: blur(3px);
}

/* ---- Status tags — mono with square bullet ---- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 9px; color: var(--gray);
}
.tag::before { content: "▪"; font-size: 9px; }
.tag-ok { color: var(--ok); }
.tag-warn { color: var(--warn); }
.tag-bad { color: var(--bad); }
.tag-mute { color: var(--mute); }
.tag-plain::before { content: none; }

/* ---- Cards ---- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(16,16,16,.02);
}
.panel-dark {
  background: var(--dark); color: var(--on-dark); border-radius: var(--r);
  position: relative; overflow: hidden;
}
.panel-dark .grad-rule { height: 2px; background: var(--rule-grad); border-radius: 2px; }

.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--chipline) transparent; }