/* SPDX-License-Identifier: GPL-2.0-or-later */
/**
 * Component Styles for Sinople Theme
 * Reusable UI components
 */

/* Buttons */
.button,
button,
input[type="submit"],
input[type="button"] {
  display: inline-block;
  padding: var(--space-2) var(--space-6);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  font-size: var(--font-sm);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  line-height: var(--leading-normal);
}

.button:hover,
.button:focus-visible,
button:hover,
button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.button-outline {
  background: transparent;
  color: var(--color-primary);
}

.button-outline:hover,
.button-outline:focus-visible {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
}

/* Search form */
.search-form {
  display: flex;
  gap: 0;
}

.search-form .search-field {
  flex: 1;
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.search-form .search-submit {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Badges */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  line-height: 1;
}

/* Contrast toggle (footer) */
.sinople-contrast-toggle-wrapper {
  margin-top: var(--space-4);
  text-align: center;
}

.sinople-contrast-toggle {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
}