/* Import Bootstrap 5 */
@import url('../bootstrap/bootstrap.min.css');

/* Import Design Tokens (must be first so other files can reference tokens) */
@import url('tokens.css');

/* Global Base Styles */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg-body);
}

/* Override Bootstrap defaults with theme variables */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary);
  opacity: 0.8;
}

/* Form styles */
.form-control {
  background-color: var(--bg-form);
  border-color: var(--form-border);
  color: var(--text-inverse);
}

.form-control::placeholder {
  color: var(--text-placeholder);
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--color-primary-alpha);
  color: var(--text-inverse);
}

.input-group-text {
  background-color: var(--form-bg-group);
  border-color: var(--form-border);
  color: var(--form-text-group);
}

/* Close button (offcanvas sidebar) */
.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Button overrides */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

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

/* Navbar styles */
.navbar {
  background-color: var(--bg-navbar);
}