/**
 * SPOTD — shared design tokens (2026)
 * Loads after base admin/user CSS; overrides are scoped where possible.
 */

/* Titres — police locale (fichier : public/assets_front/Valorant Font.ttf) */
@font-face {
  font-family: "Valorant";
  src: url("../../assets_front/Valorant%20Font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Sous-titres + libellés de boutons — public/assets_front/Jost-900-Black.ttf */
@font-face {
  font-family: "Jost";
  src: url("../../assets_front/Jost-900-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --spotd-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spotd-font-display: "Poppins", "Inter", system-ui, sans-serif;
  /* Titres du site (hero, sections, H1–H3 front) */
  --spotd-font-title: "Valorant", "Bricolage Grotesque", "Poppins", system-ui, sans-serif;
  /* Sous-titres + texte des boutons (Jost Black) */
  --spotd-font-subtitle: "Jost", "Inter", system-ui, sans-serif;
  --spotd-font-button: "Jost", "Inter", system-ui, sans-serif;
  /* mockup — fond nuit #0D0D17, cartes #1E1E26, accent violet #7B61FF */
  --spotd-bg-page: #0d0d17;
  --spotd-bg-surface: #1e1e26;
  --spotd-bg-surface-hover: #25252f;
  --spotd-radius-lg: 16px;
  --spotd-radius-md: 14px;
  --spotd-radius-sm: 8px;
  --spotd-input-radius: 8px;
  --spotd-shadow-elevated: 0 18px 50px rgba(0, 0, 0, 0.4);
  --spotd-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  --spotd-border: rgba(255, 255, 255, 0.06);
  --spotd-border-accent: rgba(99, 102, 241, 0.35);
  --spotd-accent: #7b61ff;
  --spotd-accent-mid: #7b61ff;
  --spotd-accent-deep: #6344e8;
  --spotd-accent-fuchsia: #a855f7;
  --spotd-accent-soft: #c4b5fd;
  --spotd-accent-2: #00d4aa;
  --spotd-text: #ffffff;
  --spotd-text-muted: #94a3b8;
  --spotd-gradient-cta: linear-gradient(to right, #7b61ff 0%, #6344e8 100%);
  --spotd-gradient-text: linear-gradient(135deg, #f8fafc 0%, #a855f7 55%, #c4b5fd 100%);
  /* DA — rythme & cadres (mockup) */
  --spotd-section-py: clamp(2rem, 5vw, 3.75rem);
  --spotd-page-px: clamp(1rem, 3vw, 1.75rem);
  --spotd-btn-radius: 12px;
  --spotd-btn-radius-lg: 14px;
  --spotd-frame-shadow: 0 10px 36px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --spotd-frame-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(99, 102, 241, 0.14);
  /* Lisibilité — blocs centrés (dashboard, articles) ; surchargé par spotd-ux-human.css */
  --spotd-content-max-width: 72rem;
}

/* Admin */
body.admin-theme-dark #content-wrapper,
body.admin-theme-dark .content-wrapper {
  font-family: var(--spotd-font-sans);
}

body.admin-theme-dark .card {
  border-radius: var(--spotd-radius-md);
  border: 1px solid var(--spotd-border) !important;
  background: var(--spotd-glass);
  box-shadow: var(--spotd-shadow-elevated);
}

body.admin-theme-dark .card-header {
  border-bottom: 1px solid var(--spotd-border) !important;
  font-family: var(--spotd-font-display);
  letter-spacing: 0.02em;
}

body.admin-theme-dark .btn-primary {
  background: linear-gradient(135deg, var(--spotd-accent), #5a3fd4) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(124, 92, 255, 0.35);
}

body.admin-theme-dark .btn-success {
  background: linear-gradient(135deg, var(--spotd-accent-2), #00a884) !important;
  border: none !important;
  border-radius: 10px !important;
}

/* User dashboard */
body .user-dashboard-container,
body .section-container {
  font-family: var(--spotd-font-sans);
}

.user-dashboard-container .stat-card-modern,
.tournament-hero,
.dashboard-card {
  border-radius: var(--spotd-radius-lg) !important;
  border: 1px solid var(--spotd-border) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.user-dashboard-container .welcome-section h2 {
  font-family: var(--spotd-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.advanced-sidebar .sidebar-menu .menu-link {
  border-radius: 12px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.advanced-sidebar .menu-item.active .menu-link,
.advanced-sidebar .menu-link:hover {
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.2), transparent) !important;
}

/* Public front */
body:not(.admin-theme-dark) {
  font-family: var(--spotd-font-sans);
}

/* Cohérence mockup SPOTD sur tout le site public (s’appuie sur spotd-drafted-theme.css) */
body.spotd-theme-drafted .btn-primary {
  background: var(--spotd-gradient-cta) !important;
  border: none !important;
  border-radius: var(--spotd-btn-radius) !important;
  font-weight: 600;
  color: #fff !important;
  box-shadow: 0 8px 26px rgba(99, 102, 241, 0.38);
}

body.spotd-theme-drafted .btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 32px rgba(168, 85, 247, 0.35);
}

body.spotd-theme-drafted .btn-outline-primary {
  color: var(--spotd-accent-soft) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  background: transparent !important;
  border-radius: var(--spotd-btn-radius) !important;
}

body.spotd-theme-drafted .btn-outline-primary:hover {
  background: rgba(99, 102, 241, 0.14) !important;
  color: #fff !important;
  border-color: rgba(168, 85, 247, 0.55) !important;
}

/* DA — boutons secondaires / états (même arrondi & poids que le mockup) */
body.spotd-theme-drafted .btn {
  border-radius: var(--spotd-btn-radius);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}

body.spotd-theme-drafted .btn-lg {
  border-radius: var(--spotd-btn-radius-lg);
  padding: 0.65rem 1.4rem;
}

body.spotd-theme-drafted .btn-sm {
  border-radius: 10px;
  font-weight: 600;
}

body.spotd-theme-drafted .btn-secondary {
  background: rgba(32, 32, 40, 0.95) !important;
  border: 1px solid var(--spotd-border) !important;
  color: var(--spotd-text) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

body.spotd-theme-drafted .btn-secondary:hover {
  background: rgba(42, 42, 52, 0.98) !important;
  border-color: rgba(99, 102, 241, 0.28) !important;
  color: #fff !important;
}

body.spotd-theme-drafted .btn-success {
  background: linear-gradient(135deg, #059669, #047857) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.28);
}

body.spotd-theme-drafted .btn-success:hover {
  filter: brightness(1.05);
}

body.spotd-theme-drafted .btn-danger {
  background: linear-gradient(135deg, #dc2626, #991b1b) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(220, 38, 38, 0.25);
}

body.spotd-theme-drafted .btn-warning {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
  border: none !important;
  color: #0a0a0a !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.22);
}

body.spotd-theme-drafted .btn-info {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.25);
}

body.spotd-theme-drafted .btn-dark {
  background: rgba(18, 18, 22, 0.95) !important;
  border: 1px solid var(--spotd-border) !important;
  color: var(--spotd-text) !important;
}

/* Cadre générique réutilisable (Blade : class="spotd-surface p-4 rounded-4") */
body.spotd-theme-drafted .spotd-surface {
  background: var(--spotd-bg-surface);
  border: 1px solid var(--spotd-border);
  border-radius: var(--spotd-radius-md);
  box-shadow: var(--spotd-frame-shadow);
}

body.spotd-theme-drafted .spotd-surface--accent {
  border-color: var(--spotd-border-accent);
  box-shadow: var(--spotd-frame-shadow), 0 0 48px rgba(99, 102, 241, 0.08);
}

/* Sections : espacement vertical homogène */
body.spotd-theme-drafted .spotd-home-section,
body.spotd-theme-drafted .spotd-section-y {
  padding-top: var(--spotd-section-py);
  padding-bottom: var(--spotd-section-py);
}

/* Focus clavier — contour violet cohérent avec la DA */
body.spotd-theme-drafted .btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.45),
    0 8px 24px rgba(99, 102, 241, 0.2);
}

body.spotd-theme-drafted .btn-primary:focus-visible {
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.45),
    0 8px 28px rgba(99, 102, 241, 0.35);
}

/* Champs — rayons mockup 6–8px */
body.spotd-theme-drafted .form-control,
body.spotd-theme-drafted .form-select,
body.spotd-theme-drafted textarea.form-control {
  border-radius: var(--spotd-input-radius, 8px);
}