/* SquadPicks frontend - base.css */
/* Base typography and element styles. */

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

/* ============================================================
 * Headings
 * ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

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

/* ============================================================
 * Inline text
 * ============================================================ */
a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}
/* Only apply hover color shift on unstyled (class-less) anchors.
 * Buttons, nav links, brand, etc. own their own hover states. */
a:not([class]):hover { color: var(--color-primary-dark); }

strong, b { font-weight: var(--font-weight-semibold); }
small { font-size: var(--font-size-sm); color: var(--color-text-muted); }
code, kbd, samp {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
}

p { margin: 0 0 var(--space-3) 0; }
p:last-child { margin-bottom: 0; }

/* ============================================================
 * Forms
 * ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18);
}

input::placeholder, textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* ============================================================
 * Tables
 * ============================================================ */
table {
  background: var(--color-bg-elevated);
  border-radius: var(--radius);
  overflow: hidden;
}
th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-bg);
}
tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
 * Misc
 * ============================================================ */
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

figure { margin: 0; }