/* ============================================================
   StatusRooms — Design tokens
   Operator-dark, cyan accent, calm under pressure.
   ============================================================ */

:root {
  /* ---------- Color: surfaces (dark canvas) ---------- */
  --sr-bg:           #0a0d12;   /* page canvas */
  --sr-bg-2:        #0d1117;   /* secondary surface */
  --sr-surface:     #11161e;   /* card */
  --sr-surface-2:   #161c26;   /* nested card / hover */
  --sr-surface-3:   #1b2330;   /* row hover */
  --sr-elev:        #1f2937;   /* popovers / menus */

  /* ---------- Borders ---------- */
  --sr-border:      rgba(255, 255, 255, 0.06);
  --sr-border-2:    rgba(255, 255, 255, 0.09);
  --sr-border-3:    rgba(255, 255, 255, 0.13);
  --sr-divider:     rgba(255, 255, 255, 0.04);

  /* ---------- Text ---------- */
  --sr-fg:          #e6ebf2;
  --sr-fg-2:        #c5cdd9;
  --sr-fg-muted:    #8a94a3;
  --sr-fg-dim:      #5b6473;
  --sr-fg-faint:    #3d4452;

  /* ---------- Brand accent (cyan) ---------- */
  --sr-accent:        #06b6d4;
  --sr-accent-hover:  #22d3ee;
  --sr-accent-fg:     #04161b;
  --sr-accent-soft:   rgba(6, 182, 212, 0.12);
  --sr-accent-ring:   rgba(6, 182, 212, 0.35);

  /* ---------- Status colors ---------- */
  --sr-ok:           #10b981;        /* operational */
  --sr-ok-soft:      rgba(16, 185, 129, 0.14);
  --sr-ok-ring:      rgba(16, 185, 129, 0.32);

  --sr-warn:         #f59e0b;        /* degraded */
  --sr-warn-soft:    rgba(245, 158, 11, 0.14);
  --sr-warn-ring:    rgba(245, 158, 11, 0.32);

  --sr-partial:      #fb923c;        /* partial outage */
  --sr-partial-soft: rgba(251, 146, 60, 0.14);

  --sr-bad:          #ef4444;        /* major outage */
  --sr-bad-soft:     rgba(239, 68, 68, 0.14);
  --sr-bad-ring:     rgba(239, 68, 68, 0.32);

  --sr-maint:        #818cf8;        /* maintenance — soft violet */
  --sr-maint-soft:   rgba(129, 140, 248, 0.14);

  --sr-info:         #60a5fa;
  --sr-info-soft:    rgba(96, 165, 250, 0.14);

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

  /* ---------- Radii ---------- */
  --sr-r-xs:  4px;
  --sr-r-sm:  6px;
  --sr-r-md:  8px;
  --sr-r-lg:  10px;
  --sr-r-xl:  14px;
  --sr-r-2xl: 20px;

  /* ---------- Shadows / glows ---------- */
  --sr-shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --sr-shadow-md:  0 6px 16px -4px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --sr-shadow-lg:  0 24px 48px -12px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.35);

  /* ---------- Spacing ---------- */
  --sr-h-topbar: 52px;
  --sr-w-sidenav: 232px;

  /* ---------- Tweakable defaults (overridden via Tweaks panel) ---------- */
  --sr-density: 1;       /* multiplier for row padding */
}

/* Light public-status palette (only used on PublicStatus light variant) */
.sr-light {
  --sr-bg:        #fafaf9;
  --sr-bg-2:      #ffffff;
  --sr-surface:   #ffffff;
  --sr-surface-2: #f4f4f3;
  --sr-surface-3: #efeeec;
  --sr-elev:      #ffffff;
  --sr-border:    rgba(0,0,0,0.07);
  --sr-border-2:  rgba(0,0,0,0.10);
  --sr-border-3:  rgba(0,0,0,0.16);
  --sr-divider:   rgba(0,0,0,0.05);
  --sr-fg:        #0e1116;
  --sr-fg-2:      #2a3140;
  --sr-fg-muted:  #5b6473;
  --sr-fg-dim:    #8a94a3;
  --sr-fg-faint:  #c0c6d1;
}

/* ============================================================
   Base
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  background: var(--sr-bg);
  color: var(--sr-fg);
  font-family: var(--sr-font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}
*, *::before, *::after { box-sizing: border-box; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: inherit; }

::selection { background: var(--sr-accent-soft); color: var(--sr-fg); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* ============================================================
   Mono helper
   ============================================================ */
.sr-mono {
  font-family: var(--sr-font-mono);
  font-feature-settings: "zero", "ss01";
  font-variant-numeric: tabular-nums;
}
.sr-tnum { font-variant-numeric: tabular-nums; }
.sr-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 500;
}