:root {
  --color-primary: #e50914;
  --primary-hover: #e50914;
  --color-bg: #0b0b0e;
  --color-surface: #121218;
  --color-text: #f5f6f7;
  --color-muted: #a1a6ae;
  --color-accent: #22d3ee;
}

/* Thème clair */
/* :root.light-theme {
  --color-primary: #e50914;
  --primary-hover: #e50914;
  --color-bg: #f5f5f7;
  --color-surface: #ffffff;
  --color-text: #0b0b0e;
  --color-muted: #555;
  --color-accent: #22d3ee;
}

html, body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.4s ease, color 0.4s ease;
}
 */
body {
    cursor: url("images/cursor.png") 0 0, auto;
}

::selection {
    background-color: var(--color-primary);
    color: var(--color-text);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--color-text);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}


/* Scrollbar fine et élégante juste pour le planning */
#scroll-container::-webkit-scrollbar {
  height: 8px;
}

#scroll-container::-webkit-scrollbar-track {
  background: var(--color-surface);
  border-radius: 10px;
}

#scroll-container::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

#scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary); 
  cursor: none;
}

/* Compatibilité Firefox */
#scroll-container {
  scrollbar-width: thin;
  scrollbar-color: var(--color-text) var(--color-surface);
}



.bg-primary {
    background-color: var(--color-primary);
}
.bg-primary-hover:hover {
    background-color: var(--primary-hover);
}
.text-primary {
    color: var(--color-primary);
}

.border-primary {
    border-color: var(--color-primary);
}

.bg-surface {
    background-color: var(--color-surface);
}

.bg-app {
    background-color: var(--color-bg);
}

.text-app {
    color: var(--color-text);
}

.text-muted {
    color: var(--color-muted);
}

.ring-primary {
    --tw-ring-color: var(--color-primary);
}

html {
    scroll-behavior: smooth;
}


/* style.css */
.bg-primary-alpha-20 {
  background-color: rgba(229, 9, 20, 0.2);
  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}