/* ==========================================================================
   coquin.css — Theme hot pour le module Mode Coquin
   Override des CSS variables via body.theme-hot
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme Hot — Variables override
   -------------------------------------------------------------------------- */

body.theme-hot {
  --primary: #E11D48;
  --primary-light: #FB7185;
  --primary-dark: #9F1239;
  --bg: #1A0A0E;
  --bg-secondary: #2D0F18;
  --bg-tertiary: #3D1422;
  --border: rgba(225, 29, 72, 0.2);
  --border-hover: rgba(225, 29, 72, 0.4);
  --text: #FFF1F2;
  --text-secondary: rgba(255, 241, 242, 0.7);
  --text-tertiary: rgba(255, 241, 242, 0.45);
  --shadow-sm: 0 2px 8px rgba(225, 29, 72, 0.1);
  --shadow-md: 0 4px 16px rgba(225, 29, 72, 0.15);
}

/* --------------------------------------------------------------------------
   Theme Hot — Component overrides
   -------------------------------------------------------------------------- */

body.theme-hot .header {
  background: rgba(26, 10, 14, 0.95);
  border-color: rgba(225, 29, 72, 0.15);
  backdrop-filter: blur(12px);
}

body.theme-hot .header__brand,
body.theme-hot .header__logo {
  color: #FB7185;
}

body.theme-hot .nav {
  background: rgba(26, 10, 14, 0.95);
  border-color: rgba(225, 29, 72, 0.15);
  backdrop-filter: blur(12px);
}

body.theme-hot .nav__item--active {
  color: #E11D48;
}

body.theme-hot .machine__tab--active {
  color: #E11D48;
  border-color: #E11D48;
  background: rgba(225, 29, 72, 0.1);
}

body.theme-hot .machine__reel-window {
  border-color: rgba(225, 29, 72, 0.25);
  background: #1A0A0E;
}

body.theme-hot .machine__reel-window-line {
  border-color: rgba(225, 29, 72, 0.4);
  background: rgba(225, 29, 72, 0.06);
}

body.theme-hot .machine__reel-window::before {
  background: linear-gradient(180deg, #1A0A0E, transparent);
}

body.theme-hot .machine__reel-window::after {
  background: linear-gradient(0deg, #1A0A0E, transparent);
}

body.theme-hot .machine__reel--stopped .machine__reel-item--selected {
  color: #E11D48;
}

body.theme-hot .machine__draw-btn {
  background: linear-gradient(135deg, #E11D48, #9F1239);
  border-color: transparent;
  color: white;
}

body.theme-hot .machine__draw-btn:hover {
  background: linear-gradient(135deg, #FB7185, #E11D48);
}

body.theme-hot .machine__preselect-chip {
  background: rgba(225, 29, 72, 0.08);
  border-color: rgba(225, 29, 72, 0.3);
  color: #FB7185;
}

body.theme-hot .machine__preselect-chip:hover {
  background: rgba(225, 29, 72, 0.15);
}

body.theme-hot .machine__preselect-chip--off {
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-color: var(--border);
}

body.theme-hot .machine__match-result {
  background: rgba(225, 29, 72, 0.06);
  border-color: rgba(225, 29, 72, 0.2);
}

body.theme-hot .machine__match-label {
  color: #E11D48;
}

body.theme-hot .machine__reel-lock--locked {
  background: #E11D48;
  border-color: #E11D48;
}

body.theme-hot .machine__reel-eliminate--active {
  color: #E11D48;
  border-color: #E11D48;
  background: rgba(225, 29, 72, 0.06);
}

body.theme-hot .machine__vote {
  background: var(--bg-secondary);
  border-color: var(--border);
}

body.theme-hot .machine__reel-custom {
  background: rgba(225, 29, 72, 0.1);
  border-color: rgba(225, 29, 72, 0.25);
  color: #FB7185;
}

body.theme-hot .machine__reel-custom:hover {
  background: rgba(225, 29, 72, 0.2);
  border-color: #E11D48;
}

body.theme-hot .btn--ghost {
  color: #FB7185;
  border-color: rgba(225, 29, 72, 0.3);
}

body.theme-hot .btn--ghost:hover {
  background: rgba(225, 29, 72, 0.1);
  border-color: #E11D48;
}

body.theme-hot .input {
  background: #2D0F18;
  border-color: rgba(225, 29, 72, 0.2);
  color: #FFF1F2;
}

body.theme-hot .input:focus {
  border-color: #E11D48;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

body.theme-hot .toast {
  background: #2D0F18;
  border-color: rgba(225, 29, 72, 0.2);
  color: #FFF1F2;
}

/* --------------------------------------------------------------------------
   Smooth transition between themes
   -------------------------------------------------------------------------- */

body {
  transition: background-color 0.4s ease, color 0.3s ease;
}

.header,
.nav,
.machine__reel-window,
.machine__draw-btn,
.input {
  transition: background-color 0.4s ease, border-color 0.3s ease, color 0.3s ease;
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body,
  .header,
  .nav,
  .machine__reel-window,
  .machine__draw-btn,
  .input {
    transition: none;
  }
}