/* ============================================================
   Syndie · V4 tokens — the synthesis.
   One element chosen from each reference language:
   - Cohere (V1): serif editorial display, ink pill actions,
     tonal surfaces, the Fluence gradient confined to imagery.
   - Intercom (V2): warm cream canvas, warm neutral ramp,
     tone-shift sections, edge-anchored hero photography.
   - Valley (V3): Geist Mono labeling voice with square-bullet
     tags, faint line-grid working canvases, dark panels crowned
     by a thin Fluence rule.
   ============================================================ */

:root {
  /* Surfaces — Intercom's warmth */
  --canvas: #FAF9F6;
  --linen: #F1EEE9;
  --card: #FFFFFF;
  --ink: #17171C;
  --ink-2: #232328;

  /* Text — warm neutral ramp */
  --text: #1D1D1B;
  --text-2: #57574F;
  --faint: #8B8B82;
  --on-ink: #FFFFFF;
  --on-ink-2: #A2A29B;

  /* Lines */
  --hairline: #E3E0D8;
  --gridline: #EDEBE3;

  /* Brand */
  --green: #1E7A44;
  --green-deep: #14572F;
  --green-soft: #E9F1EB;

  /* Fluence — imagery, washes, and the dark-panel rule only */
  --fluence:
    radial-gradient(64% 130% at 4% 46%, #B18EDC 0%, rgba(177,142,220,0) 64%),
    radial-gradient(36% 52% at 97% 4%, #F3C69E 0%, rgba(243,198,158,0) 68%),
    radial-gradient(40% 52% at 102% 92%, #BC9FE3 0%, rgba(188,159,227,0) 66%),
    linear-gradient(97deg, #DECFF0 0%, #F1EBF7 46%, #F6EEE6 100%);
  --fluence-overlay:
    radial-gradient(64% 130% at 4% 46%, rgba(177,142,220,.55) 0%, rgba(177,142,220,0) 64%),
    radial-gradient(36% 52% at 97% 4%, rgba(243,198,158,.5) 0%, rgba(243,198,158,0) 68%),
    radial-gradient(40% 52% at 102% 92%, rgba(188,159,227,.5) 0%, rgba(188,159,227,0) 66%);
  --fluence-rule: linear-gradient(90deg, #B18EDC 0%, #F3C69E 55%, #4C6EE6 100%);

  /* Status */
  --ok: #1E7A44;    --ok-soft: #E9F1EB;
  --warn: #96660F;  --warn-soft: #F5EDDA;
  --bad: #A63A22;   --bad-soft: #F6E9E4;
  --mute: #67675F;  --mute-soft: #EFEDE6;

  /* Shape — pills act, cards rest */
  --r-pill: 9999px;
  --r-card: 16px;
  --r-sm: 6px;

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

  --page-max: 1200px;
}

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

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

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

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

.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; margin: 0; }

/* ---- Mono labeling voice (Valley) ---- */
.mono {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
}
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--green-deep);
  background: var(--green-soft); border-radius: var(--r-pill); padding: 8px 14px;
}
.kicker::before { content: "▪"; font-size: 9px; color: var(--green); }
.caption-box {
  display: inline-block; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 12px 20px;
}

/* ---- Actions (Cohere): ink pill + underline ---- */
.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-pill); border: none; cursor: pointer; text-decoration: none;
  transition: background .13s ease, border-color .13s ease;
}
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-ink { background: var(--ink); color: var(--on-ink); padding: 13px 22px; }
.btn-ink:hover { background: #000; }
.btn-ink.sm { padding: 10px 17px; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--text); padding: 9px 13px; border-radius: var(--r-pill); font-weight: 400; }
.btn-ghost:hover { background: var(--linen); }

.link-u {
  color: var(--text); 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: 13.5px;
}
.link-u:hover { color: #000; }
.link-u:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ---- Status tags (Valley mono, warm-soft fills) ---- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1;
  border-radius: var(--r-sm); padding: 6px 9px;
}
.tag::before { content: "▪"; font-size: 8px; }
.tag-ok   { color: var(--ok);   background: var(--ok-soft); }
.tag-warn { color: var(--warn); background: var(--warn-soft); }
.tag-bad  { color: var(--bad);  background: var(--bad-soft); }
.tag-mute { color: var(--mute); background: var(--mute-soft); }
.tag-line { color: var(--text-2); background: var(--card); border: 1px solid var(--hairline); }
.tag-line::before { content: none; }

/* ---- Cards ---- */
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); }
.panel-ink { background: var(--ink); color: var(--on-ink); border-radius: var(--r-card); overflow: hidden; }
.panel-ink .fluence-rule { height: 2px; background: var(--fluence-rule); }

.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(--hairline) transparent; }