/* ============================================================================
   S2Stools design system — "The faithful copy"
   Canonical copy: saas/S2Stools.Website/wwwroot/css/s2s.css
   Mirrored to:    saas/S2Stools.Portal/wwwroot/css/s2s.css
   Keep the two in sync — edit here, copy there.
   ========================================================================== */

/* ---- Faces ---------------------------------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---- Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* color */
  --s2s-ink:        #10233F;   /* engineering navy — headings, chrome */
  --s2s-ink-2:      #3D4F66;   /* secondary text */
  --s2s-ink-3:      #5A6B80;   /* tertiary / muted — keeps ≥4.5:1 on paper, panel, and alt surfaces */
  --s2s-paper:      #F4F6F8;   /* page ground — cool technical paper */
  --s2s-panel:      #FFFFFF;   /* cards, surfaces */
  --s2s-line:       #DCE2E9;   /* hairlines */
  --s2s-draft:      #9DB4CE;   /* schematic linework */
  --s2s-grid:       #E8EDF2;   /* drafting-grid texture */
  --s2s-verd:       #0B7A55;   /* verified green — actions, checks, brand */
  --s2s-verd-deep:  #085E42;
  --s2s-verd-tint:  #E3F1EB;
  --s2s-amber:      #A96908;   /* metering, warnings */
  --s2s-amber-tint: #F7EEDC;
  --s2s-danger:     #B3383B;
  --s2s-danger-tint:#F8E9E9;
  --s2s-blue:       #2F5FA3;   /* running / informational */
  --s2s-blue-tint:  #E7EEF7;

  /* type */
  --s2s-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --s2s-sans:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --s2s-mono:    "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  /* geometry */
  --s2s-radius:    10px;
  --s2s-radius-sm: 6px;
  --s2s-shadow:    0 1px 2px rgba(16, 35, 63, .05), 0 4px 16px rgba(16, 35, 63, .06);
  --s2s-shadow-lg: 0 2px 6px rgba(16, 35, 63, .07), 0 16px 40px rgba(16, 35, 63, .10);
}

/* ---- Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--s2s-sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--s2s-ink);
  background: var(--s2s-paper);
}
h1, h2, h3 { color: var(--s2s-ink); margin: 0 0 .5em; }
h1, h2 { font-family: var(--s2s-display); letter-spacing: -.015em; }
h1 { font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.35rem); line-height: 1.06; }
h2 { font-weight: 600; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.15; }
h3 { font-family: var(--s2s-sans); font-weight: 600; font-size: 1.06rem; }
p  { margin: 0 0 1em; }
a  { color: var(--s2s-verd); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, pre, .mono { font-family: var(--s2s-mono); }
.muted { color: var(--s2s-ink-3); }
:focus-visible {
  outline: 2px solid var(--s2s-verd);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Spec labels & rules (the drafting voice) ------------------------------ */
.s2s-eyebrow {
  font-family: var(--s2s-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s2s-verd);
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .9rem;
}
.s2s-eyebrow::after {
  content: "";
  flex: 0 0 3.5rem;
  height: 1px;
  background: var(--s2s-draft);
}
.s2s-rule { border: 0; border-top: 1px solid var(--s2s-line); margin: 0; }

/* ---- Buttons ---------------------------------------------------------------- */
.s2s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: 500 .93rem/1 var(--s2s-sans);
  padding: .72rem 1.25rem;
  border-radius: var(--s2s-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.s2s-btn:hover { text-decoration: none; }
.s2s-btn-primary { background: var(--s2s-verd); color: #fff; }
.s2s-btn-primary:hover { background: var(--s2s-verd-deep); }
.s2s-btn-secondary {
  background: transparent;
  color: var(--s2s-ink);
  border-color: var(--s2s-ink);
}
.s2s-btn-secondary:hover { background: var(--s2s-ink); color: #fff; }
.s2s-btn-ghost { background: transparent; color: var(--s2s-ink-2); }
.s2s-btn-ghost:hover { color: var(--s2s-ink); background: var(--s2s-grid); }
.s2s-btn:disabled { opacity: .55; cursor: not-allowed; }
.s2s-btn-lg { padding: .9rem 1.6rem; font-size: 1rem; }

/* On-ink variants (dark chrome contexts) */
.on-ink .s2s-btn-secondary { color: #fff; border-color: rgba(255,255,255,.55); }
.on-ink .s2s-btn-secondary:hover { background: #fff; color: var(--s2s-ink); }

/* ---- Cards ------------------------------------------------------------------ */
.s2s-card {
  background: var(--s2s-panel);
  border: 1px solid var(--s2s-line);
  border-radius: var(--s2s-radius);
  box-shadow: var(--s2s-shadow);
  padding: 1.15rem 1.35rem;
}

/* ---- Status pills ------------------------------------------------------------ */
.s2s-pill {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font: 500 .78rem/1 var(--s2s-mono);
  letter-spacing: .02em;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--s2s-line);
  background: var(--s2s-grid);
  color: var(--s2s-ink-2);
}
.s2s-pill::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.s2s-pill-succeeded { background: var(--s2s-verd-tint);  border-color: #BBDCCE; color: var(--s2s-verd-deep); }
.s2s-pill-running   { background: var(--s2s-blue-tint);  border-color: #C4D4EA; color: var(--s2s-blue); }
.s2s-pill-queued    { background: var(--s2s-grid);       border-color: var(--s2s-line); color: var(--s2s-ink-2); }
.s2s-pill-failed    { background: var(--s2s-danger-tint);border-color: #E4C2C2; color: var(--s2s-danger); }
.s2s-pill-pausedonbudget { background: var(--s2s-amber-tint); border-color: #E4D2AC; color: var(--s2s-amber); }
.s2s-pill-canceled  { background: var(--s2s-grid);       border-color: var(--s2s-line); color: var(--s2s-ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .s2s-pill-running::before { animation: s2s-pulse 1.6s ease-in-out infinite; }
}
@keyframes s2s-pulse { 50% { opacity: .35; } }

/* ---- Tables ------------------------------------------------------------------ */
.s2s-table { border-collapse: collapse; width: 100%; background: var(--s2s-panel); }
.s2s-table th {
  font: 500 .72rem/1.2 var(--s2s-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--s2s-ink-3);
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--s2s-draft);
}
.s2s-table td {
  padding: .62rem .8rem;
  border-bottom: 1px solid var(--s2s-line);
  font-size: .92rem;
}
.s2s-table tr:hover td { background: var(--s2s-paper); }
.s2s-num { font-family: var(--s2s-mono); font-size: .88rem; }

/* ---- Forms -------------------------------------------------------------------- */
.s2s-field { display: block; margin-bottom: 1rem; }
.s2s-field > span {
  display: block;
  font: 500 .8rem/1.3 var(--s2s-sans);
  color: var(--s2s-ink-2);
  margin-bottom: .3rem;
}
input[type="text"], input[type="url"], input[type="number"], input[type="email"],
select, textarea {
  font: 400 .92rem/1.4 var(--s2s-sans);
  color: var(--s2s-ink);
  background: var(--s2s-panel);
  border: 1px solid var(--s2s-line);
  border-radius: var(--s2s-radius-sm);
  padding: .55rem .7rem;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--s2s-verd);
  outline-offset: 0;
  border-color: var(--s2s-verd);
}
.s2s-check { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; font-size: .93rem; }
.s2s-check input { accent-color: var(--s2s-verd); width: 1rem; height: 1rem; }

/* ---- Pre / spec blocks ---------------------------------------------------------- */
.s2s-spec {
  font-family: var(--s2s-mono);
  font-size: .8rem;
  line-height: 1.55;
  background: var(--s2s-ink);
  color: #C7D5E4;
  border-radius: var(--s2s-radius-sm);
  padding: .9rem 1.1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Logo ------------------------------------------------------------------------- */
.s2s-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: 700 1.12rem/1 var(--s2s-display);
  letter-spacing: -.01em;
  color: var(--s2s-ink);
  text-decoration: none;
}
.s2s-wordmark:hover { text-decoration: none; }
.s2s-wordmark img, .s2s-wordmark svg { width: 26px; height: 26px; display: block; }
.on-ink .s2s-wordmark { color: #fff; }