/* /assets/css/theme.css  — minimal, valid, no warnings */

/* Light (default) */
:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --soft: #f3f4f6;

  --text: #111827;
  --muted: #6b7280;

  --line: #e5e7eb;
  --field-bg: #ffffff;
  --field-line: #cbd5e1;

  --btn-bg: #f8fafc;
  --btn-bg-hover: #eef2f7;

  --primary: #2563eb;
  --primary-strong: #1e40af;

  /* Box shadow used by cards/panels */
  --shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* Dark mode */
html[data-theme="dark"] {
  --bg: #0b1220;
  --panel: #0f172a;
  --soft: #0c1426;

  --text: #e5e7eb;
  --muted: #9aa4b2;

  --line: #1f2a44;
  --field-bg: #0f172a;
  --field-line: #223055;

  --btn-bg: #111b33;
  --btn-bg-hover: #0f1a31;

  --primary: #4f8cff;
  --primary-strong: #2e61d3;

  --shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Base elements (kept tiny to avoid fighting page-specific styles) */
body {
  background: var(--bg);
  color: var(--text);
}

/* Buttons (fallbacks in case a page forgets to style them) */
button.btn,
a.btn,
input[type="submit"].btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--btn-bg);
  color: var(--text);
  border-radius: 12px;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
button.btn:hover,
a.btn:hover,
input[type="submit"].btn:hover {
  background: var(--btn-bg-hover);
}

.btn-dark,
.btn-primary {
  border-color: transparent;
  /* Use a simple solid fallback if gradients ever fail */
  background: var(--primary);
  color: #fff;
}

/* Inputs */
input, textarea, select {
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-line);
  border-radius: 12px;
}