/* ============================================================
   HASSLE — Design Tokens
   Light editorial (Lightspeed) + dark terminal moments (Teller)
   All-sans (Inter) + mono (JetBrains Mono). Signal green, rationed.
   ============================================================ */

@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/Inter-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/Inter-Bold.ttf') format('truetype'); }

:root {
  /* ─── Surfaces ─────────────────────────────────────────── */
  --paper:      #FFFFFF;   /* primary canvas */
  --bone:       #F6F6F3;   /* warm off-white section bg */
  --mist:       #EFEFEA;   /* deeper section / card */
  --ink:        #0A0B0D;   /* near-black text & dark CTAs */
  --ink-soft:   #15171B;
  --night:      #0C0D11;   /* dark terminal surface */
  --night-2:    #131519;   /* raised terminal surface */
  --night-line: #23262D;   /* terminal hairline */

  /* ─── Warm grey scale ─────────────────────────────────── */
  --grey-100:   #F2F2EE;
  --grey-200:   #E6E6E0;
  --grey-300:   #D4D4CC;   /* hairline on light */
  --grey-400:   #B4B4AB;
  --grey-500:   #8A8A82;
  --grey-600:   #6B6B63;   /* secondary text */
  --grey-700:   #494941;

  /* ─── Signal (verified / live / routed) ───────────────── */
  --signal:        #00B863;   /* the brand accent — verified green */
  --signal-deep:   #03351F;   /* ink on green chips */
  --signal-soft:   rgba(0,184,99,0.12);
  --signal-line:   rgba(0,184,99,0.32);
  --term-green:    #3DE08A;   /* phosphor green on night */
  --term-dim:      #5D8A72;   /* terminal comment grey-green */
  --term-cyan:     #62D5D0;
  --amber:         #E8A33D;   /* "pending / review" */
  --plum:          #7A4BC9;   /* legal / completion path */

  /* ─── Type families ───────────────────────────────────── */
  --font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ─── Spacing (8pt base) ──────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --s-20:80px; --s-24:96px; --s-32:128px;

  /* ─── Radii ───────────────────────────────────────────── */
  --r-chip:8px; --r-btn:11px; --r-card:16px; --r-lg:22px; --r-pill:100px;

  /* ─── Shadows ─────────────────────────────────────────── */
  --elev-soft:  0 1px 2px rgba(10,11,13,0.04), 0 4px 14px rgba(10,11,13,0.05);
  --elev-pop:   0 12px 40px rgba(10,11,13,0.12);
  --elev-press: 0 3px 0 0 rgba(10,11,13,0.85);   /* signature hard-drop CTA */
  --max:        1240px;  /* content max width */
}

/* ─── Base ────────────────────────────────────────────────── */
* { box-sizing: border-box; }
.h-display, .h-eyebrow, body.hassle { font-family: var(--font); }

/* Display / editorial headline — big & tight */
.h-display {
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.h-eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-600);
}

/* Verified chip */
.h-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 11px 5px 9px; border-radius: var(--r-pill);
  background: var(--signal-soft); color: var(--signal-deep);
  border: 1px solid var(--signal-line);
}
.h-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 0 rgba(0,184,99,0.5);
  animation: h-pulse 1.8s ease-in-out infinite;
}
@keyframes h-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,184,99,0.45); }
  50%     { opacity: .65; box-shadow: 0 0 0 5px rgba(0,184,99,0); }
}

/* Buttons — signature hard-drop */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: var(--r-btn);
  border: none; cursor: pointer; text-decoration: none;
  transition: transform .12s cubic-bezier(.2,.7,.3,1), box-shadow .12s, background .15s;
  letter-spacing: -0.01em;
}
.h-btn--primary { background: var(--ink); color: var(--paper); box-shadow: var(--elev-press); }
.h-btn--primary:hover  { transform: translateY(1px); box-shadow: 0 2px 0 0 rgba(10,11,13,0.85); }
.h-btn--primary:active { transform: translateY(3px); box-shadow: 0 0 0 0 rgba(10,11,13,0.85); }
.h-btn--signal { background: var(--signal); color: #022; box-shadow: 0 3px 0 0 #02371f; }
.h-btn--signal:hover  { transform: translateY(1px); box-shadow: 0 2px 0 0 #02371f; }
.h-btn--signal:active { transform: translateY(3px); box-shadow: 0 0 0 0 #02371f; }
.h-btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--grey-300); box-shadow: none;
}
.h-btn--ghost:hover { border-color: var(--ink); }

/* Mono helpers */
.mono { font-family: var(--mono); }
.sel-green::selection { background: var(--signal); color: #022; }

/* ─── MicroFeedback ──────────────────────────────────────────
   Inline, low-friction feedback prompt rendered under the action
   it follows (beta feedback layer spec §3.3). Stays calm: small
   card, no modal unless reason required; signal-green only on
   the "Thanks" confirmation. */
.micro-feedback {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--grey-300);
  border-radius: var(--r-card);
  background: var(--grey-100);
  font-family: var(--font);
  color: var(--ink);
}
.micro-feedback__prompt {
  margin: 0 0 var(--s-3) 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.micro-feedback__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.micro-feedback__options .h-btn,
.micro-feedback__reason-actions .h-btn {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--r-chip);
}
.micro-feedback__option,
.micro-feedback__skip {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--grey-300);
}
.micro-feedback__option:hover,
.micro-feedback__skip:hover {
  border-color: var(--ink);
}
.micro-feedback__skip {
  color: var(--grey-600);
  margin-left: auto;
}
.micro-feedback__reason {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.micro-feedback__reason-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-2);
  border: none;
  padding: 0;
  margin: 0;
}
.micro-feedback__reason-radio {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--grey-300);
  border-radius: var(--r-chip);
  background: var(--paper);
  cursor: pointer;
}
.micro-feedback__reason-radio:hover {
  border-color: var(--ink);
}
.micro-feedback__reason-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.micro-feedback__thanks {
  margin: 0;
  font-size: 13px;
  color: var(--signal-deep);
  background: var(--signal-soft);
  padding: 8px 12px;
  border-radius: var(--r-chip);
  border: 1px solid var(--signal-line);
  display: inline-block;
}
/* Accessible hidden text — used for fieldset legends we visually hide. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}