/* Design Tokens — Cronvera Branding */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

[data-theme="dark"] {
  --bg-page: #0f1117;
  --bg-surface: #1a1d27;
  --bg-surface-raised: #242736;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --border: #2a2d3a;
  --border-strong: #3f4354;

  --accent: #3B82F6;
  --accent-hover: #2563eb;

  --status-up: #22C55E;
  --status-up-bg: rgba(34, 197, 94, 0.12);
  --status-down: #EF4444;
  --status-down-bg: rgba(239, 68, 68, 0.12);
  --status-paused: #F59E0B;
  --status-paused-bg: rgba(245, 158, 11, 0.12);
  --status-never: #64748b;
  --status-never-bg: rgba(100, 116, 139, 0.12);

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  color-scheme: dark;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-primary);
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: .25rem;
}

.bg-surface {
  background-color: var(--bg-surface);
}

.bg-surface-raised {
  background-color: var(--bg-surface-raised);
}

.border-custom {
  border-color: var(--border);
}

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }

.btn-accent {
  background-color: var(--accent);
  color: #fff;
}
.btn-accent:hover {
  background-color: var(--accent-hover);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.status-badge.up { background-color: var(--status-up-bg); color: var(--status-up); }
.status-badge.down { background-color: var(--status-down-bg); color: var(--status-down); }
.status-badge.paused { background-color: var(--status-paused-bg); color: var(--status-paused); }
.status-badge.never_pinged { background-color: var(--status-never-bg); color: var(--status-never); }

code, pre, .font-mono {
  font-family: var(--font-mono);
}

/* Input styling */
input, select, textarea {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Table styling */
table th {
  color: var(--text-muted);
}
table tr {
  border-color: var(--border);
}
table tr:hover {
  background-color: var(--bg-surface);
}

/* Links */
a.text-link {
  color: var(--accent);
}
a.text-link:hover {
  color: var(--accent-hover);
}

/* Flash messages */
.flash-success { background-color: var(--status-up-bg); color: var(--status-up); }
.flash-error { background-color: var(--status-down-bg); color: var(--status-down); }
.flash-info { background-color: rgba(59, 130, 246, 0.12); color: var(--accent); }