/**
 * RShop — design tokens (source unique, thème sombre + violet)
 * Chargé en premier (après les polices), avant styles.css / rshop-store.css
 *
 * Composants CTA : préférer `class="btn btn-primary"` / `btn btn-secondary` (styles + glass) ;
 * `.card` / `.input` / `.modal` ci-dessous sont des primitives optionnelles sur body.rs-store / admin.
 */

:root {
  --color-primary: #8b5cf6;
  --color-primary-hover: #a78bfa;
  --color-bg: #0a0a0c;
  --color-card: #1f1f24;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-text: #fafafa;
  --color-muted: #a1a1aa;

  /* Glass — boutons primaires (stops figés, pas de génération JS) */
  --rshop-glass-btn-overlay-top: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.05) 42%,
    transparent 55%
  );
  --rshop-glass-btn-overlay-violet: linear-gradient(
    145deg,
    rgba(192, 181, 255, 0.55) 0%,
    rgba(124, 58, 237, 0.42) 45%,
    rgba(91, 33, 182, 0.48) 100%
  );
  --rshop-glass-btn-tint: rgba(16, 14, 26, 0.38);
  --rshop-glass-btn-border: rgba(255, 255, 255, 0.32);
  --rshop-glass-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(67, 24, 120, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.15), 0 14px 40px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(139, 92, 246, 0.15);

  --rshop-glass-btn-hover-overlay-top: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    transparent 52%
  );
  --rshop-glass-btn-hover-overlay-violet: linear-gradient(
    145deg,
    rgba(216, 201, 255, 0.58) 0%,
    rgba(139, 92, 246, 0.5) 48%,
    rgba(109, 40, 217, 0.52) 100%
  );
  --rshop-glass-btn-hover-tint: rgba(22, 18, 36, 0.42);
  --rshop-glass-btn-hover-border: rgba(255, 255, 255, 0.42);
  --rshop-glass-btn-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(91, 33, 182, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.22), 0 20px 48px rgba(91, 33, 182, 0.28), 0 0 0 1px rgba(167, 139, 250, 0.22);

  /* Bouton plein (fallback, hors glass) */
  --rshop-btn-primary-solid: linear-gradient(
    180deg,
    var(--color-primary) 0%,
    #7c3aed 48%,
    #6d28d9 100%
  );
  --rshop-btn-primary-solid-hover: linear-gradient(
    180deg,
    var(--color-primary-hover) 0%,
    var(--color-primary) 45%,
    #7c3aed 100%
  );
}

/* -------------------------------------------------------------------------- */
/* Primitives — composants (à combiner avec .btn / structures existantes)   */
/* -------------------------------------------------------------------------- */

body.rs-store .btn.btn-primary,
body.rs-store .rs-btn--primary,
body.rs-store button.btn.btn-primary,
body.rs-store a.btn.btn-primary {
  filter: none;
}

body.rs-store .card,
body.admin-page .card,
body.adm-page .card,
body.rshop-boutique-page .card {
  background: var(--color-card, #1f1f24);
  color: var(--color-text, #fafafa);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 8px rgba(0, 0, 0, 0.35);
}

body.rs-store .input,
body.rshop-boutique-page .input,
body.admin-page .input,
body.adm-page .input {
  font: inherit;
  color: var(--color-text, #fafafa);
  background: var(--color-card, #1f1f24);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: 11px;
}

body.rs-store .input:focus,
body.rshop-boutique-page .input:focus,
body.admin-page .input:focus,
body.adm-page .input:focus {
  outline: 2px solid rgba(139, 92, 246, 0.45);
  outline-offset: 0;
  border-color: rgba(139, 92, 246, 0.35);
}

body.rs-store .modal,
body.rshop-boutique-page .modal,
body.admin-page .modal,
body.adm-page .modal {
  color: var(--color-text, #fafafa);
}