/* ═══════════════════════════════════════════════════════════════════════════
   03-elements.css — Base HTML Element Styles
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-base);
}

/* ── Headings ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

/* ── Links ──────────────────────────────────────────────────────────────── */
a {
  color: var(--accent);
  transition: color var(--duration-fast) var(--ease);
}
a:hover {
  color: var(--accent-hover);
}

/* ── Code ───────────────────────────────────────────────────────────────── */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  padding: 0.125rem 0.375rem;
  background: var(--bg-elevated);
  border-radius: var(--radius-xs);
  color: var(--accent);
  font-size: var(--text-sm);
}

pre {
  padding: var(--sp-xl);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* ── Horizontal Rule ────────────────────────────────────────────────────── */
hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: var(--sp-2xl) 0;
}

/* ── Form Elements ──────────────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2316B1FF' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-lg) center;
  padding-right: var(--sp-3xl);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-xl);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
}

button:active, .btn:active {
  transform: scale(0.98);
}

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

.btn-secondary {
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border-color: var(--border);
}
.btn-secondary:hover {
  background-color: var(--bg-hover);
  border-color: var(--border);
}

.btn-danger {
  color: #fff;
  background-color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover {
  opacity: 0.9;
}

.btn-ghost {
  color: var(--text-secondary);
  background: transparent;
  border-color: transparent;
}
.btn-ghost:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.btn-sm {
  padding: var(--sp-xs) var(--sp-md);
  font-size: var(--text-sm);
}

.btn-icon {
  padding: var(--sp-md);
  width: 36px;
  height: 36px;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
table {
  width: 100%;
  text-align: left;
}

th {
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}

td {
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  vertical-align: middle;
}

tr:hover td {
  background-color: var(--bg-hover);
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}