:root {
  --transition-speed: 0.3s;

  /* based thème */
  --bg-primary: var(--bg-primary-default);
  --bg-secondary: var(--bg-secondary-default);
  --bg-hover: var(--bg-hover-default);
  --text-primary: var(--text-primary-default);
  --text-secondary: var(--text-secondary-default);
  --border-color: var(--border-color-default);
  --shadow-color: var(--shadow-color-default);
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-hover: #3d3d3d;
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --border-color: #404040;
  --shadow-color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-hover: #e9ecef;
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-color: #dee2e6;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

[data-theme="default"] {
  --bg-primary-default: #ffffff;
  --bg-secondary-default: #f8f9fa;
  --bg-hover-default: #e9ecef;
  --text-primary-default: #333333;
  --text-secondary-default: #666666;
  --border-color-default: #dee2e6;
  --shadow-color-default: rgba(0, 0, 0, 0.1);
}