/* CSS Resets */
* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
}

button,
input,
textarea,
select {
  margin: 0;
  padding: 0;
  font-family: inherit;
}

/* Component Classes */

.btn-primary {
  background-color: var(--primary-action);
  color: var(--on-primary-action);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--stack-gap) var(--panel-padding);
  cursor: pointer;
  font-weight: var(--text-body-lg-weight);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  letter-spacing: var(--text-body-lg-tracking);
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-ghost {
  background-color: transparent;
  color: var(--on-surface-variant);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--stack-gap) var(--panel-padding);
  cursor: pointer;
  font-weight: var(--text-body-lg-weight);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  letter-spacing: var(--text-body-lg-tracking);
}

.btn-ghost:hover {
  opacity: 0.8;
}

.badge {
  background-color: var(--pill-bg);
  border-radius: 9999px;
  padding: 4px 12px;
  display: inline-block;
  font-size: var(--text-label-caps-size);
  font-weight: var(--text-label-caps-weight);
  line-height: var(--text-label-caps-line);
  letter-spacing: var(--text-label-caps-tracking);
  text-transform: uppercase;
}

/* Generic element styling */

input,
textarea,
select {
  background-color: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--stack-gap) var(--panel-padding);
  color: var(--on-surface);
}

.card {
  border: 1px solid var(--border);
  border-radius: 4px;
}