/* Spotsheet — Design tokens. Brief 1.
   Carry these forward into every page. */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --bg-app:        #121417;  /* viewport */
  --bg-deep:       #0d0f12;  /* inset / recessed */
  --bg-panel:      #191b1f;  /* cards, panels */
  --bg-sub:        #1d2024;  /* secondary surfaces */
  --bg-row:        #1c1e22;  /* list rows */
  --bg-row-hover:  #21242a;
  --bg-row-sel:    #252932;  /* selected */
  --bg-row-multi:  #232730;  /* multi-select */

  /* ── Borders ──────────────────────────────────────────── */
  --line:          #2a2d33;
  --line-strong:   #353941;
  --line-soft:     #232529;

  /* ── Text ─────────────────────────────────────────────── */
  --fg:            #d4d7dc;  /* primary — warm grey, not white */
  --fg-strong:     #ebedf0;  /* emphasis */
  --fg-mute:       #8b8f96;  /* secondary */
  --fg-dim:        #5b5f66;  /* tertiary */
  --fg-faint:      #3d4047;  /* disabled / hint */

  /* ── Teal (sole chromatic accent, used sparingly) ─────── */
  --teal:          #35C5C7;
  --teal-deep:     #1e8587;
  --teal-bg:       rgba(53,197,199,0.07);
  --teal-line:     rgba(53,197,199,0.32);
  --teal-glow:     rgba(53,197,199,0.18);

  /* ── Status ───────────────────────────────────────────── */
  --st-open:       #8b8f96;
  --st-resolved:   #7a9a86;
  --st-flagged:    #c19355;
  --st-danger:     #b46868;

  /* ── Category coding (only true chromatic signals) ────── */
  --cat-foley:     #c89d6a;  /* warm gold */
  --cat-fx:        #9b8ec9;  /* soft purple */
  --cat-dlg:       #6ba3d0;  /* cool blue */
  --cat-mus:       #d08aa3;  /* dusty rose */

  /* ── Assignee tints (used as 24px initials circles) ───── */
  --asg-teal:      #2d8a8c;
  --asg-rose:      #a06277;
  --asg-amber:     #a37a48;
  --asg-lilac:     #7a6fa6;
  --asg-sky:       #4e7fa0;
  --asg-sage:      #5a8770;
  --asg-clay:      #966a52;

  /* ── Type ─────────────────────────────────────────────── */
  --ui:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii (intentionally small) ──────────────────────── */
  --r-micro:  2px;  /* chips, dots */
  --r-btn:    3px;  /* buttons, chips, inputs */
  --r-panel:  4px;  /* panels, cards, dropdowns */

  /* ── Shadows ──────────────────────────────────────────── */
  --inset-panel:
    inset 0 1px 0 rgba(255,255,255,0.03),
    inset 0 -1px 0 rgba(0,0,0,0.4);
  --inset-input:
    inset 0 1px 1px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.015);
  --float:
    0 12px 32px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.45);

  /* ── Button gradient (neutral, restrained) ────────────── */
  --btn-grad:    linear-gradient(180deg, #2c2f34 0%, #232529 100%);
  --btn-grad-h:  linear-gradient(180deg, #34373d 0%, #2a2c31 100%);
  --btn-grad-a:  linear-gradient(180deg, #232529 0%, #1d1f23 100%);

  /* ── Timing ───────────────────────────────────────────── */
  --t-fast:  120ms ease;
  --t-base:  150ms ease;
}

/* ─── Base reset for surfaces using these tokens ──────────── */
.nt-surface,
.nt-app {
  background: var(--bg-app);
  color: var(--fg);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 1, "cv11" 1;
}

.nt-mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.nt-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ─── Panel ───────────────────────────────────────────────── */
.nt-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--inset-panel);
}

/* ─── Buttons ─────────────────────────────────────────────── */
.nt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--btn-grad);
  color: var(--fg);
  font: 500 12px/1 var(--ui);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}
.nt-btn:hover  { background: var(--btn-grad-h); border-color: var(--line-strong); }
.nt-btn:active { background: var(--btn-grad-a); }
.nt-btn[disabled] { opacity: .4; cursor: not-allowed; }

.nt-btn.primary {
  border-color: var(--teal-line);
  color: var(--teal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px transparent,
    0 0 8px var(--teal-glow);
}
.nt-btn.primary:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.nt-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-mute);
  box-shadow: none;
}
.nt-btn.ghost:hover { color: var(--fg); background: var(--bg-row-hover); }

.nt-btn.sm { height: 22px; padding: 0 8px; font-size: 11px; }
.nt-btn.lg { height: 34px; padding: 0 16px; font-size: 13px; }
.nt-btn.icon-only { width: 28px; padding: 0; justify-content: center; }

/* ─── Chips ───────────────────────────────────────────────── */
.nt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--bg-sub);
  color: var(--fg-mute);
  font: 500 11px/1 var(--ui);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.nt-chip.active {
  color: var(--teal);
  border-color: var(--teal-line);
  background: var(--teal-bg);
}
.nt-chip .ct { color: var(--fg-dim); font-family: var(--mono); font-size: 10px; }
.nt-chip.active .ct { color: var(--teal); }
.nt-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-dim); }

/* ─── Inputs ──────────────────────────────────────────────── */
.nt-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: var(--inset-input);
  color: var(--fg);
  font: 400 13px/1 var(--ui);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.nt-input input,
.nt-input textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: inherit;
  font: inherit;
}
.nt-input input::placeholder { color: var(--fg-dim); }
.nt-input.focused {
  border-color: var(--teal-line);
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.45),
    0 0 0 1px var(--teal-line),
    0 0 12px var(--teal-glow);
}
.nt-input.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: 0.02em; }

/* ─── Status pills ────────────────────────────────────────── */
.nt-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 7px 0 6px;
  border-radius: 9px;
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--fg-mute);
  background: var(--bg-sub);
}
.nt-pill .pd { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.nt-pill.open      { color: var(--st-open); }
.nt-pill.resolved  { color: var(--st-resolved); border-color: rgba(122,154,134,0.28); }
.nt-pill.flagged   { color: var(--st-flagged); border-color: rgba(193,147,85,0.32); }
.nt-pill.danger    { color: var(--st-danger);  border-color: rgba(180,104,104,0.32); }

/* ─── Category tags ───────────────────────────────────────── */
.nt-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-micro);
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--bg-sub);
  border: 1px solid var(--line);
}
.nt-cat .swatch { width: 6px; height: 6px; border-radius: 1px; }
.nt-cat.foley { color: var(--cat-foley); } .nt-cat.foley .swatch { background: var(--cat-foley); }
.nt-cat.fx    { color: var(--cat-fx); }    .nt-cat.fx    .swatch { background: var(--cat-fx); }
.nt-cat.dlg   { color: var(--cat-dlg); }   .nt-cat.dlg   .swatch { background: var(--cat-dlg); }
.nt-cat.mus   { color: var(--cat-mus); }   .nt-cat.mus   .swatch { background: var(--cat-mus); }

/* ─── Category left bar (on rows) ─────────────────────────── */
.nt-catbar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0.9; }
.nt-catbar.foley { background: var(--cat-foley); }
.nt-catbar.fx    { background: var(--cat-fx); }
.nt-catbar.dlg   { background: var(--cat-dlg); }
.nt-catbar.mus   { background: var(--cat-mus); }

/* ─── Assignee circle ─────────────────────────────────────── */
.nt-asg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font: 600 10px/1 var(--ui);
  letter-spacing: 0.02em;
  color: var(--fg-strong);
  border: 1px solid rgba(255,255,255,0.06);
}
.nt-asg.teal  { background: var(--asg-teal);  }
.nt-asg.rose  { background: var(--asg-rose);  }
.nt-asg.amber { background: var(--asg-amber); }
.nt-asg.lilac { background: var(--asg-lilac); }
.nt-asg.sky   { background: var(--asg-sky);   }
.nt-asg.sage  { background: var(--asg-sage);  }
.nt-asg.clay  { background: var(--asg-clay);  }

/* ─── Notification badge ──────────────────────────────────── */
.nt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px; height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: var(--st-danger);
  color: #fff;
  font: 700 9px/1 var(--ui);
  letter-spacing: 0.02em;
  border: 1px solid rgba(0,0,0,0.4);
}

/* ─── SFX indicator chip ──────────────────────────────────── */
.nt-sfx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-btn);
  border: 1px solid var(--teal-line);
  background: var(--teal-bg);
  color: var(--teal);
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nt-sfx::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 6px var(--teal-glow);
}

/* ─── Kbd keys ────────────────────────────────────────────── */
.nt-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font: 600 10px/1 var(--mono);
  color: var(--fg-mute);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: var(--r-micro);
}

/* ─── Tooltip ─────────────────────────────────────────────── */
.nt-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: var(--float);
  color: var(--fg);
  font: 500 11px/1 var(--ui);
}
.nt-tip .nt-kbd { background: var(--bg-deep); }

/* ─── Section labels ──────────────────────────────────────── */
.nt-label {
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ─── Divider ─────────────────────────────────────────────── */
.nt-div { height: 1px; background: var(--line); border: 0; margin: 0; }
.nt-div.soft { background: var(--line-soft); }