/* ============================================================
   Syndie · V2 tokens — Intercom design language, translated.
   Rules carried over from the reference system:
   - Warm cream canvas (#faf9f6); never pure white as page ground.
   - All grays carry a warm undertone; no cool/blue-tinted neutrals.
   - Display type whispers at weight 300; 400 only for body.
   - 4px border-radius universally — no pills, nothing above 4px.
   - Black (#000) filled primary buttons; accent is never a fill.
   - No shadows, no gradients, no hard divider lines —
     separation comes from warm background tone shifts.
   - Mono at 12px with +1.2px tracking is the labeling system.
   - One accent (Syndie green), once or twice per screen, small doses.
   ============================================================ */

:root {
  /* Surfaces — the four-step tone ladder */
  --canvas: #FAF9F6;      /* warm off-white page ground */
  --linen: #F1EEE9;       /* alternating section band, one step warmer */
  --stone: #D3CEC6;       /* decorative texture wash, large warm fields */
  --card: #FFFFFF;        /* inverted surface: cards on cream */
  --black: #000000;       /* filled primary buttons, dark panels */

  /* Text — warm neutral ramp */
  --ink: #111111;
  --iron: #414141;
  --graphite: #585858;
  --smoke: #888888;
  --ash: #A0A0A0;
  --silver: #B8B8B8;
  --on-black: #FFFFFF;
  --on-black-2: #A8A8A8;

  /* Lines */
  --hairline: #DEDBD6;

  /* Accent — sparing, small functional doses only */
  --accent: #1E7A44;

  /* Status (app only) — warm-tinted, text-forward */
  --ok: #1E7A44;    --ok-soft: #EAF0E9;
  --warn: #8A6410;  --warn-soft: #F3EDDD;
  --bad: #A03325;   --bad-soft: #F5E9E5;
  --mute: #585858;  --mute-soft: #EFEDE8;

  /* Shape — one radius, everywhere */
  --r: 4px;

  /* Type */
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;

  /* Rhythm — 4px base */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --page-max: 1200px;
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 400; line-height: 1.4;
  letter-spacing: -0.006em;
  font-feature-settings: "tnum" on;
}

::selection { background: #E3E9E2; }

/* ---- Display voice: the 300-weight whisper ---- */
.display, .display-lg, .h-lg, .h-md, .h-sm {
  font-weight: 300; margin: 0; color: var(--ink);
}
.display-lg { font-size: clamp(54px, 5.6vw, 80px); line-height: 0.95; letter-spacing: -0.03em; }
.display    { font-size: clamp(40px, 3.8vw, 54px); line-height: 1.0;  letter-spacing: -0.03em; }
.h-lg       { font-size: 40px; line-height: 1.25; letter-spacing: -0.03em; }
.h-md       { font-size: 32px; line-height: 1.3;  letter-spacing: -0.02em; }
.h-sm       { font-size: 24px; line-height: 1.4;  letter-spacing: -0.02em; }

.serif { font-family: var(--font-serif); font-weight: 300; font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; }

/* ---- Mono labeling system ---- */
.mono-label {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--graphite);
}

/* ---- Actions — sharp, weightless ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1;
  border-radius: var(--r); cursor: pointer; text-decoration: none;
  border: none; transition: background .13s ease, border-color .13s ease;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-black { background: var(--black); color: var(--on-black); padding: 14px 18px; }
.btn-black:hover { background: #262626; }
.btn-black.sm { padding: 10px 14px; font-size: 13px; }
.btn-outline { background: var(--card); color: var(--ink); border: 1px solid var(--ink); padding: 13px 17px; }
.btn-outline:hover { background: var(--linen); }
.btn-outline.sm { padding: 9px 13px; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--ink); padding: 10px 12px; }
.btn-ghost:hover { background: var(--linen); }

.link-u {
  color: var(--ink); font-weight: 400; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--smoke);
  cursor: pointer; background: none; border: none; padding: 0;
  font-family: var(--font-sans); font-size: 13.5px; letter-spacing: -0.006em;
}
.link-u:hover { text-decoration-color: var(--ink); }
.link-u:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Tags — mono badges, never pills ---- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; line-height: 1;
  padding: 5px 8px; border-radius: var(--r);
}
.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(--graphite); background: transparent; border: 1px solid var(--hairline); }

/* ---- Cards — hairline on cream, no shadows ---- */
.card-w { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r); }
.panel-black { background: var(--black); color: var(--on-black); border-radius: var(--r); }

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