/* v3-tokens.css — Refined design system (light + dark).
 *
 * Direction: mostly white, mostly black, rounded corners, one sans-serif
 * family doing everything, color only where it carries meaning. No accent
 * color, no shadows, no gradients. Status palette is the only place hue
 * appears — and even there it's a single low-saturation pip, not a fill.
 *
 * Two name systems coexist in this file:
 *   - Refined names (--paper, --ink) — the canonical going-forward set
 *   - Legacy names (--bg, --ink-1, --accent) — aliased to Refined values
 *     so the rest of app.css keeps rendering during the migration. As we
 *     touch each component CSS rule we swap legacy → Refined names.
 *     Final cleanup deletes the legacy aliases.
 */

:root {
  /* Surfaces (Refined) */
  --paper:   #ffffff;
  --paper-2: #fafafa;
  --paper-3: #f4f4f4;

  /* Ink scale (Refined) */
  --ink:   #0a0a0a;
  --ink-2: #3a3a3a;
  --ink-3: #767676;
  --ink-4: #b8b8b8;

  /* Hairlines — bumped one notch darker in light mode for more visible
     card separation against #ffffff paper (was #ececec, too quiet). */
  --rule: #d8d8d8;

  /* Status — used ONLY in status pips + meta-line bolds.
     Low-sat: the room stays calm but the signal still reads. */
  --st-red:    #b8412e;  --st-red-soft:    #f6e8e4;
  --st-yellow: #a07517;  --st-yellow-soft: #f4ecd9;
  --st-green:  #2e7449;  --st-green-soft:  #e2ede5;
  --st-blue:   #2a5a8a;  --st-blue-soft:   #e0eaf2;

  /* ── Legacy aliases (kept while we migrate app.css rule by rule) ──
     --accent / --accent-soft were dropped in Phase 8 (no remaining refs).
     --bg / --ink-1 / --bg-2 / --bg-3 are still referenced by ~170 rules
     in app.css; left aliased here to avoid a mechanical sweep with no
     visual gain. Safe to remove progressively as we touch each rule. */
  --bg:   var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --ink-1: var(--ink);
}

html[data-theme="dark"], body[data-theme="dark"] {
  /* Refined dark variant (per kickoff decision to keep dark mode).
     Same restraint: paper inverts to near-black, ink to near-white,
     status pips brighten just enough to stay legible at low-sat. */
  --paper:   #0a0a0a;
  --paper-2: #141414;
  --paper-3: #1c1c1c;

  --ink:   #fafafa;
  --ink-2: #c8c8c8;
  --ink-3: #8a8a8a;
  --ink-4: #4a4a4a;

  --rule: #2a2a2a;

  /* Status colors lightened ~25% for dark-paper contrast.
     Soft tints become dark-tinted backgrounds (used sparingly). */
  --st-red:    #d96a5a;  --st-red-soft:    #2a1814;
  --st-yellow: #c89a3a;  --st-yellow-soft: #2a2010;
  --st-green:  #4e9a6a;  --st-green-soft:  #14241a;
  --st-blue:   #5a8ab0;  --st-blue-soft:   #14202c;

  /* Legacy aliases re-bind to dark Refined values */
  --bg:   var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --ink-1: var(--ink);
}

html { background: var(--paper); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Transition only enabled AFTER first paint, via the .theme-ready class added by JS.
   This prevents a 250ms fade between pages on every navigation. */
body.theme-ready { transition: background .2s ease, color .2s ease; }

/* ── THEME TOGGLE ── */
.theme-toggle {
  position: fixed; top: 24px; right: 24px; z-index: 100;
  display: inline-flex; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--paper); padding: 3px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; font-weight: 600;
}
.theme-toggle button { all: unset; padding: 6px 14px; cursor: pointer; border-radius: 999px; color: var(--ink-2); }
.theme-toggle button.on { background: var(--ink); color: var(--paper); }
.theme-toggle button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── CHIP / PILL ──
   Chips carry a brand monogram + name. Pills are toggle affordances
   (filters, tags, niches). Both use full-pill radius + ink-on-white
   "on" state — never accent. */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease; }
/* Brand monogram inside a chip: Inter Tight 600 uppercase (was JetBrains Mono).
   No serif anywhere. Same treatment applies to .ava / .ava-mini elsewhere — see app.css. */
.chip .ava { width: 26px; height: 26px; border-radius: 999px; background: var(--paper-3); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: "Inter Tight", "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.on .ava { background: var(--paper); color: var(--ink); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 999px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; flex-shrink: 0; cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill.on .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--paper); display: inline-block; }
.pill.dashed { border-style: dashed; border-color: var(--ink-3); color: var(--ink-3); }
.pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pill .count { font-family: "JetBrains Mono", monospace; font-size: 10px; opacity: .6; margin-left: 2px; }
/* Dead-end pill: zero matches under the current filter combo. */
.pill.is-empty, .chip.is-empty {
  opacity: 0.4; filter: grayscale(1);
  pointer-events: none;
}

/* ── FIELDS ── */
.field { margin-bottom: 22px; }
.field-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; font-weight: 600; }
/* Required marker shifts from accent to mid-grey per brief §6.2 */
.field-label .required { color: var(--ink-3); }
.field-label .opt { color: var(--ink-4); }
/* Inputs: radius 12px, no glow on focus — border thickens to ink, that's
   the whole signal. Outline only appears for keyboard nav (focus-visible). */
.input-box { display: block; width: 100%; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px; background: var(--paper); font-family: inherit; font-size: 14px; color: var(--ink); transition: border-color .15s ease; }
.input-box.placeholder { color: var(--ink-3); }
.input-box.mono { font-family: "JetBrains Mono", monospace; font-size: 12.5px; }
.input-box:focus { outline: 0; border-color: var(--ink); }
.input-box:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.textarea { display: block; width: 100%; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px; background: var(--paper); min-height: 80px; font-family: "Inter", sans-serif; font-size: 14px; color: var(--ink); resize: vertical; transition: border-color .15s ease; }
.textarea:focus { outline: 0; border-color: var(--ink); }
.textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }

/* ── BUTTONS ──
   Refined: pill radius (999px), no block shadows, no accent. Three semantic
   variants plus .btn-subtle for non-primary toolbar actions (Filters,
   Rating ↓, Download template) — sits visually between secondary and ghost. */
/* Buttons are rounded rectangles (12px), not full pills — Vincent's call.
   Pill-shape stays only on small toggle affordances (.pill, .chip). */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 12px; font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px; line-height: 1; cursor: pointer; }
.btn-primary[disabled], .btn-primary.is-disabled { opacity: .45; pointer-events: none; }
.btn-primary .glyph { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500; }
.btn-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 12px; font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px; line-height: 1; cursor: pointer; }
.btn-secondary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-subtle { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); border-radius: 12px; font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px; line-height: 1; cursor: pointer; }
.btn-subtle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--ink-2); padding: 6px 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-4); text-decoration-thickness: 1px; font-family: inherit; font-size: 14px; font-weight: 500; border: 0; cursor: pointer; }
.btn-ghost:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ── STARS ──
   Filled = ink, empty = ink-4. No more orange. */
.stars { display: inline-flex; gap: 3px; line-height: 1; font-family: "Inter", system-ui, sans-serif; }
.stars span { font-size: 14px; color: var(--ink-4); }
.stars span.on { color: var(--ink); }

/* ── STATUS ROW (dashboard / brand list) ──
   The biggest perceptual shift from v3. Row stays white; the 3px colored
   left border + soft-tint background are gone. Color appears only in an
   8px pip and (subtly) in the meta-line bold. The fire-alarm signal still
   reads — red pip is unmistakable next to ink — but the room feels quieter.
   The brand monogram avatar moves to Inter Tight (matches the rest of the
   monograms across the app). */
.status-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; }
.status-row .pip { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-4); flex-shrink: 0; }
.status-row.red    .pip { background: var(--st-red); }
.status-row.yellow .pip { background: var(--st-yellow); }
.status-row.green  .pip { background: var(--st-green); }
.status-row.blue   .pip { background: var(--st-blue); }
.status-row .ava { width: 26px; height: 26px; border-radius: 999px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; }
.status-row .name { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: -.01em; color: var(--ink); }
.status-row .meta-line { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; font-weight: 600; color: var(--ink-3); }
.status-row.red    .meta-line { color: var(--st-red); }
.status-row.yellow .meta-line { color: var(--st-yellow); }
.status-row.green  .meta-line { color: var(--st-green); }
.status-row.blue   .meta-line { color: var(--st-blue); }
.status-row .glyph { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .15em; font-weight: 600; color: var(--ink-3); }
.status-row.red    .glyph { color: var(--st-red); }
.status-row.yellow .glyph { color: var(--st-yellow); }
.status-row.green  .glyph { color: var(--st-green); }
.status-row.blue   .glyph { color: var(--st-blue); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}