/* Dify Status Page — Design Tokens */
:root {
  /* Typography */
  --font-sans: "Geist", "SF Pro Text", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --font-display: "Geist", "SF Pro Display", -apple-system, sans-serif;

  /* Dark theme (default) */
  --bg-0: #07090d;
  --bg-1: #0b0e14;
  --bg-2: #10141c;
  --bg-3: #161b25;
  --bg-hover: #1c2230;
  --bg-elev: #1a2030;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text-0: #f5f7fa;
  --text-1: #e1e5ed;
  --text-2: #a8b0bf;
  --text-3: #6b7283;
  --text-4: #474d5c;

  /* Status colors */
  --ok: #22c55e;
  --ok-bg: rgba(34, 197, 94, 0.12);
  --ok-border: rgba(34, 197, 94, 0.35);
  --ok-glow: rgba(34, 197, 94, 0.5);

  --degraded: #f59e0b;
  --degraded-bg: rgba(245, 158, 11, 0.12);
  --degraded-border: rgba(245, 158, 11, 0.35);

  --down: #ef4444;
  --down-bg: rgba(239, 68, 68, 0.12);
  --down-border: rgba(239, 68, 68, 0.4);
  --down-glow: rgba(239, 68, 68, 0.5);

  --maint: #60a5fa;
  --maint-bg: rgba(96, 165, 250, 0.12);
  --maint-border: rgba(96, 165, 250, 0.35);

  /* Brand — Dify uses a blue-violet */
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-glow: rgba(37, 99, 235, 0.45);
  --accent: #6366f1;
  --c-accent: #2563eb;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);

  /* Geometry */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

[data-theme="light"] {
  --bg-0: #f7f8fa;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f3f4f7;
  --bg-hover: #eef0f4;
  --bg-elev: #ffffff;

  --border-subtle: rgba(15, 23, 42, 0.06);
  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.2);

  --text-0: #0b1220;
  --text-1: #1f2937;
  --text-2: #4b5563;
  --text-3: #6b7280;
  --text-4: #9ca3af;

  --ok: #16a34a;
  --ok-bg: rgba(22, 163, 74, 0.1);
  --ok-border: rgba(22, 163, 74, 0.3);
  --ok-glow: rgba(22, 163, 74, 0.3);

  --degraded: #d97706;
  --degraded-bg: rgba(217, 119, 6, 0.1);
  --degraded-border: rgba(217, 119, 6, 0.3);

  --down: #dc2626;
  --down-bg: rgba(220, 38, 38, 0.08);
  --down-border: rgba(220, 38, 38, 0.3);
  --down-glow: rgba(220, 38, 38, 0.3);

  --maint: #2563eb;
  --maint-bg: rgba(37, 99, 235, 0.08);
  --maint-border: rgba(37, 99, 235, 0.3);

  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-glow: rgba(37, 99, 235, 0.25);
  --accent: #4f46e5;
  --c-accent: #2563eb;

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow: 0 4px 12px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 40px rgba(15,23,42,0.12);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--text-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01", "ss03";
}

body {
  min-height: 100vh;
}

::selection { background: var(--brand-glow); color: var(--text-0); }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Utility classes */
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }

.pulse-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  animation: pulse 2s ease-out infinite;
}
.pulse-dot.ok { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-bg); }
.pulse-dot.ok::after { box-shadow: 0 0 0 2px var(--ok-glow); }
.pulse-dot.down { background: var(--down); box-shadow: 0 0 0 2px var(--down-bg); }
.pulse-dot.down::after { box-shadow: 0 0 0 2px var(--down-glow); }
.pulse-dot.degraded { background: var(--degraded); box-shadow: 0 0 0 2px var(--degraded-bg); }

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Generic components */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-0);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  box-shadow: 0 0 0 0 var(--brand-glow);
}
.btn.primary:hover { background: var(--brand-hover); box-shadow: 0 0 0 4px var(--brand-glow); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--bg-hover); }
.btn.danger { color: var(--down); border-color: var(--down-border); }
.btn.danger:hover { background: var(--down-bg); }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: var(--radius-sm); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  letter-spacing: 0.02em;
}
.badge.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.badge.down { background: var(--down-bg); border-color: var(--down-border); color: var(--down); }
.badge.degraded { background: var(--degraded-bg); border-color: var(--degraded-border); color: var(--degraded); }
.badge.maint { background: var(--maint-bg); border-color: var(--maint-border); color: var(--maint); }

.card {
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.input, .textarea, .select {
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  background: var(--bg-2);
  color: var(--text-0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.textarea { resize: vertical; min-height: 80px; font-family: var(--font-mono); font-size: 12px; }
.label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.hint { font-size: 11px; color: var(--text-3); margin-top: 5px; }

/* Grid backdrop (used in login, banners) */
.grid-bg {
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 48px 48px;
}