/* =========================================================================
   base.css — design token + primitive DÙNG CHUNG cho các trang tĩnh
   (rp2350, esp/espflasher, landing). Tông màu chuẩn theo rp2350 (xanh dương,
   có light/dark tự động). Phục vụ tại /shared/css/base.css — mọi trang tham
   chiếu bằng path tuyệt đối, không nhân bản token.

   Nguyên tắc: chỉ đặt ở đây những GIÁ TRỊ GIỐNG NHAU giữa các trang (màu,
   font, bo góc, nút .primary/.secondary/.danger, ô nhập, .dot trạng thái).
   Phần bố cục riêng của từng trang để trong CSS của trang đó.
   ========================================================================= */

:root {
  color-scheme: light dark;

  --bg: #0f1115;
  --panel: #171a21;
  --border: #2a2e38;
  --text: #e6e8ec;
  --muted: #9aa1ac;
  --accent: #5aa9e6;
  --ok: #4caf7d;
  --warn: #d99a3d;
  --err: #e05a5a;

  --radius: 10px;
  --radius-sm: 6px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f7;
    --panel: #ffffff;
    --border: #dde1e7;
    --text: #1a1d23;
    --muted: #5b6270;
    --accent: #1f6fbf;
    --ok: #2f8f5e;
    --warn: #a86a1a;
    --err: #b03434;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* ---------------- Ô nhập ---------------- */

select,
input[type="text"],
input[type="number"] {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 0.9rem;
  font-family: var(--font-sans);
}

/* ---------------- Nút ---------------- */
/* Mặc định = nút trung tính (viền). .primary = nền accent, .danger = đỏ.
   (rp2350 tự override `button` mặc định thành accent trong CSS trang của nó
   để giữ nguyên hình thức cũ — xem rp2350-static/index.html.) */

button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); }

button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

button.danger {
  border-color: var(--err);
  color: var(--err);
}
button.danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--err) 12%, transparent);
  border-color: var(--err);
}

/* ---------------- Chấm trạng thái ---------------- */

.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.err { background: var(--err); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}