/* =============================================================
   Senaros brand as code (SBS-002)
   Authority: senaros-ops brand/design-system.md. The :root block is
   §10.1 verbatim; the components below are §4.3, §5, §6, §7 and §10.3.
   Page layout lives in styles.css and uses only these tokens.
   ============================================================= */

:root {
  /* surfaces */
  --night:   #0E151D;
  --night-2: #121B24;
  --glass:   rgba(255,255,255,.035);
  --glass-2: rgba(255,255,255,.06);
  --line:    rgba(154,240,210,.10);
  --line-2:  rgba(154,240,210,.20);

  /* text */
  --text: #F3F7F9;
  --soft: #B4C2CC;
  --dim:  #8A9BA8;   /* AA floor 4.85:1 on glass 2 - see §4.1 */

  /* brand */
  --green-1:    #9AF0D2;
  --green:      #01D498;
  --green-3:    #00B884;
  --green-deep: #00805C;
  --on-green:   #04211A; /* the only text colour on a green fill */

  /* status (dark) */
  --state-stable:   #01D498;
  --state-active:   #01D498;
  --state-adoption: #6CB8FF;
  --state-watch:    #FFC266;
  --state-action:   #FF6B7A;
  --state-unknown:  #A5B4FC;
  --state-stale:    #8A9BA8;

  /* type */
  --font-sans: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* spacing */
  --s-1: 4px; --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* radius */
  --r-pill: 7px; --r-btn: 12px; --r-box: 14px; --r-panel: 20px;
}

html, body {
  background: var(--night);
  color: var(--text);
  font: 400 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ---- type roles (§5.2) ---------------------------------------- */
.mono, .tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* Eyebrow: mono caps led by a 6px glowing green square */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-1);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: var(--green); box-shadow: 0 0 12px var(--green);
  flex: none;
}

/* Caption / UI label: way-finding only */
.label {
  font: 500 10.5px/1.3 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim);
}

/* One gradient phrase per display headline (§4.4) */
.grad {
  background: linear-gradient(100deg, #FFFFFF 0%, var(--green-1) 40%, var(--green) 80%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---- buttons (§7.1) ------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--r-btn);
  font: 600 14px/1 var(--font-sans);
  cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn-primary {
  background: linear-gradient(135deg, #3BE3AE, var(--green) 55%, var(--green-3));
  color: var(--on-green);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 8px 30px -10px rgba(1,212,152,.7);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 12px 40px -10px rgba(1,212,152,.85);
}
.btn-secondary {
  background: var(--glass); color: var(--text);
  border: 1px solid var(--line-2);
}
.btn-secondary:hover { background: var(--glass-2); }
.btn-ghost { background: transparent; color: var(--soft); }
.btn-ghost:hover { color: var(--text); }
.btn.compact { height: 38px; padding: 0 16px; font-size: 13px; }
.btn .arrow { font-family: var(--font-mono); font-weight: 500; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--green-1); outline-offset: 2px;
}

/* ---- surfaces (§4.3, §6.2, §6.3) ------------------------------ */
.glass {
  position: relative;
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px -40px rgba(1,212,152,.22), 0 1px 0 rgba(255,255,255,.12) inset;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.card {
  border-radius: var(--r-panel);
  background: var(--glass);
  border: 1px solid var(--line);
}
.inset {
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
}

/* ---- KPI tile (§7.2) ------------------------------------------ */
.kpi {
  padding: 14px 16px;
  border-radius: var(--r-box);
  background: var(--glass);
  border: 1px solid var(--line);
  min-width: 0;
}
.kpi .l {
  font: 500 10.5px/1.3 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.kpi .v {
  font: 600 26px/1.1 var(--font-sans);
  letter-spacing: -.03em; margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
.kpi .d { font: 400 12px/1.4 var(--font-mono); color: var(--soft); }
.kpi .v.watch, .kpi .d.watch { color: var(--state-watch); }
.kpi .v.good,  .kpi .d.good  { color: var(--state-stable); }
.kpi .d.up { color: var(--state-action); }

/* ---- status dot and pill (§7.6, §10.3) ------------------------ */
.sev {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.sev.action   { background: var(--state-action); }
.sev.watch    { background: var(--state-watch); }
.sev.stable   { background: var(--state-stable); }
.sev.adoption { background: var(--state-adoption); }
.sev.unknown  { background: var(--state-unknown); }
.sev.stale    { background: var(--state-stale); }
.sev.linked   { box-shadow: 0 0 0 1.5px var(--night), 0 0 0 2.5px var(--state-adoption); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--r-pill);
  border: 1px solid; white-space: nowrap;
}
.pill-action   { color: var(--state-action);   border-color: rgba(255,107,122,.35); background: rgba(255,107,122,.07); }
.pill-watch    { color: var(--state-watch);    border-color: rgba(255,194,102,.35); background: rgba(255,194,102,.07); }
.pill-stable   { color: var(--state-stable);   border-color: rgba(1,212,152,.30);   background: rgba(1,212,152,.06); }
.pill-unknown  { color: var(--state-unknown);  border-color: rgba(165,180,252,.35); background: rgba(165,180,252,.08); }
.pill-stale    { color: var(--state-stale);    border-color: rgba(154,240,210,.20); }
.pill-adoption { color: var(--state-adoption); border-color: rgba(108,184,255,.35); background: rgba(108,184,255,.07); }

/* ---- data table (§7.3) ---------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; padding: 8px 6px;
  font: 500 10px/1.3 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.data-table td {
  padding: 9px 6px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table td.num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--soft);
}

/* Consumption bar (§4.4: one of the four places a gradient may appear) */
.bar {
  display: inline-block; vertical-align: middle;
  width: 84px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #00986C, var(--green-1));
}
.bar i.over { background: linear-gradient(90deg, #B0305A, var(--state-action)); }

/* ---- motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}