/**
 * Fragvault UI components — состояния из макета (ui-states-reference.png)
 * Используйте классы .btn--primary, .btn--secondary, .btn-icon, .field
 */

@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --font-family: 'Quantico', sans-serif;
  /* Primary — Explore skins */
  --btn-primary-bg: #7b61ff;
  --btn-primary-bg-hover: #6a52eb;
  --btn-primary-bg-disabled: #2a2640;
  --btn-primary-text: #ffffff;
  --btn-primary-text-disabled: #5c5a6e;

  /* Secondary — Get started */
  --btn-secondary-bg: #1e1b33;
  --btn-secondary-bg-hover: #282445;
  --btn-secondary-bg-disabled: #12141c;
  --btn-secondary-text: #ffffff;
  --btn-secondary-text-disabled: #4a4d5c;

  /* Icon button */
  --btn-icon-size: 40px;
  --btn-icon-bg: #1e1b33;
  --btn-icon-bg-hover: #282445;
  --btn-icon-bg-active: #7b61ff;
  --btn-icon-bg-active-hover: #6a52eb;
  --btn-icon-color: #ffffff;

  /* Input / field */
  --field-label-color: #8e9bae;
  --input-bg: #121926;
  --input-border: #1c2533;
  --input-border-focus: #7b61ff;
  --input-border-error: #ef4444;
  --input-text: #ffffff;
  --input-placeholder: #8e9bae;
  --input-error-text: #ef4444;
  --input-height: 48px;
  --input-radius: 10px;

  /* Shared */
  --btn-radius: 12px;
  --btn-font-size: 0.9375rem;
  --btn-padding-y: 12px;
  --btn-padding-x: 24px;
  --transition-ui: 0.15s ease;
}

/* ——— Base button ——— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--btn-font-size);
  line-height: 1.2;
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-ui),
    color var(--transition-ui),
    border-color var(--transition-ui),
    opacity var(--transition-ui);
}

.btn:disabled,
.btn.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.btn--lg {
  padding: 14px 32px;
  font-size: 1rem;
}

.btn--pill {
  padding: 14px 28px;
}

/* Primary */

.btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: var(--btn-padding-y) var(--btn-padding-x);
}

.btn--primary:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--btn-primary-bg-hover);
}

.btn--primary:disabled,
.btn--primary.is-disabled {
  background-color: var(--btn-primary-bg-disabled);
  color: var(--btn-primary-text-disabled);
}

/* Secondary */

.btn--secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  padding: var(--btn-padding-y) var(--btn-padding-x);
}

.btn--secondary:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--btn-secondary-bg-hover);
}

.btn--secondary:disabled,
.btn--secondary.is-disabled {
  background-color: var(--btn-secondary-bg-disabled);
  color: var(--btn-secondary-text-disabled);
}

/* Icon button */

.btn-icon {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  padding: 0;
  flex-shrink: 0;
  background-color: var(--btn-icon-bg);
  color: var(--btn-icon-color);
  border-radius: var(--radius-sm, 8px);
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.btn-icon:hover:not(:disabled):not(.is-disabled):not(.is-active) {
  background-color: var(--btn-icon-bg-hover);
}

.btn-icon.is-active,
.btn-icon--active {
  background-color: var(--btn-icon-bg-active);
}

.btn-icon.is-active:hover:not(:disabled):not(.is-disabled),
.btn-icon--active:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--btn-icon-bg-active-hover);
}

.btn-icon:disabled,
.btn-icon.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-icon img,
.btn-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ——— Field / input ——— */

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.field__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--field-label-color);
}

.field__input {
  width: 100%;
  height: var(--input-height);
  padding: 0 16px;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--input-text);
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
  transition: border-color var(--transition-ui);
}

.field__input::placeholder {
  color: var(--input-placeholder);
}

.field__input:hover:not(:disabled):not(:focus) {
  border-color: #353848;
}

.field__input:focus {
  border-color: var(--input-border-focus);
}

.field__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.field--error .field__input {
  border-color: var(--input-border-error);
}

.field--error .field__input:focus {
  border-color: var(--input-border-error);
}

.field__error {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--input-error-text);
  line-height: 1.3;
}

/* UI-kit / docs: статичный preview состояния focus */
.field__input.is-demo-focus {
  border-color: var(--input-border-focus);
}

/* Search — те же токены, что у .field__input */

.search__input {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
}

.search__input::placeholder {
  color: var(--input-placeholder);
}

.search__input:focus {
  border-color: var(--input-border-focus);
}