/**
 * Tokens / base UI Boutique.
 */

:root {
  --bg: #111111;
  --surface: #1a1a1a;
  --surface-2: #242424;
  --border: #3a3a3a;
  --text: #e8e8e8;
  --text-muted: #9ca3af;
  --blue: #3b82f6;
  --blue-dark: #2563eb;
  --dark: #0a0a0a;
  --danger: #f87171;
  --gap: 6px;
  --pad: 8px;
  --radius: 8px;
  --topbar-h: 48px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:hover:not(:disabled) {
  background: #2e2e2e;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: inherit;
}

.btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.ui-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--ui-icon) center / contain no-repeat;
  mask: var(--ui-icon) center / contain no-repeat;
  vertical-align: middle;
}

.ui-icon--user {
  --ui-icon: url("../assets/icones/user.svg");
}

.ui-icon--logout {
  --ui-icon: url("../assets/icones/deco.svg");
}

.ui-icon--boutique {
  --ui-icon: url("../assets/icones/boutique.svg");
}

.ui-icon--cart {
  --ui-icon: url("../assets/icones/panier.svg");
}

.ui-icon--categories {
  --ui-icon: url("../assets/icones/categories.svg");
}

.ui-icon--nature {
  --ui-icon: url("../assets/icones/nature.svg");
}

.ui-icon--decoration {
  --ui-icon: url("../assets/icones/decoration.svg");
}

.ui-icon--animaux {
  --ui-icon: url("../assets/icones/animaux.svg");
}

.ui-icon--fetes {
  --ui-icon: url("../assets/icones/fetes.svg");
}

.ui-icon--geometrique {
  --ui-icon: url("../assets/icones/quadrillage.svg");
}

.ui-icon--abstrait {
  --ui-icon: url("../assets/icones/palette.svg");
}

.ui-icon--maison {
  --ui-icon: url("../assets/icones/forme_base.svg");
}

.ui-icon--grid {
  --ui-icon: url("../assets/icones/grid.svg");
}

.ui-icon--pipette {
  --ui-icon: url("../assets/icones/pipette.svg");
}

.ui-icon--loupe {
  --ui-icon: url("../assets/icones/loupe.svg");
}