/* ===== VARIABLES CSS - THÈME CLAIR ===== */
.theme-light {
  --bg-color: #F5F5F7;
  --text-color: #1D1D1F;
  --text-color-hover: #000000;
  --border-color: rgba(0, 0, 0, 0.1);
  --title-gradient-start: #1D1D1F;
  --title-gradient-end: #6E6E73;
  --bg-pattern: url("data:image/svg+xml,%3Csvg%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23D9D9DE%22%20stroke-width%3D%221%22%20opacity%3D%220.45%22%3E%3Cpath%20d%3D%22M48%200%20L72%2014%20L72%2042%20L48%2056%20L24%2042%20L24%2014%20Z%22/%3E%3Cpath%20d%3D%22M0%2028%20L24%2042%20L24%2070%20L0%2084%20L-24%2070%20L-24%2042%20Z%22/%3E%3Cpath%20d%3D%22M96%2028%20L120%2042%20L120%2070%20L96%2084%20L72%2070%20L72%2042%20Z%22/%3E%3Cpath%20d%3D%22M48%2056%20L72%2070%20L72%2098%20L48%20112%20L24%2098%20L24%2070%20Z%22/%3E%3C/g%3E%3C/svg%3E");
  
  --tile-bg: #FFFFFF;
  --tile-placeholder-bg: #E0E0E0;
  
  --button-primary-bg: #007AFF;
  --button-primary-hover: #0051D5;
  --button-secondary-bg: rgba(0, 0, 0, 0.1);
  --button-secondary-hover: rgba(0, 0, 0, 0.15);
  
  --input-border: rgba(0, 0, 0, 0.2);
  --input-focus-border: #007AFF;
  
  --modal-bg: #FFFFFF;
  
  --toast-bg: #1D1D1F;
}

/* ===== VARIABLES CSS - THÈME SOMBRE ===== */
.theme-dark {
  --bg-color: #000000;
  --text-color: #F5F5F7;
  --text-color-hover: #FFFFFF;
  --border-color: rgba(255, 255, 255, 0.1);
  --title-gradient-start: #F5F5F7;
  --title-gradient-end: #AEAEB2;
  --bg-pattern: url("data:image/svg+xml,%3Csvg%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2337373A%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22%3E%3Cpath%20d%3D%22M48%200%20L72%2014%20L72%2042%20L48%2056%20L24%2042%20L24%2014%20Z%22/%3E%3Cpath%20d%3D%22M0%2028%20L24%2042%20L24%2070%20L0%2084%20L-24%2070%20L-24%2042%20Z%22/%3E%3Cpath%20d%3D%22M96%2028%20L120%2042%20L120%2070%20L96%2084%20L72%2070%20L72%2042%20Z%22/%3E%3Cpath%20d%3D%22M48%2056%20L72%2070%20L72%2098%20L48%20112%20L24%2098%20L24%2070%20Z%22/%3E%3C/g%3E%3C/svg%3E");
  
  --tile-bg: #1C1C1E;
  --tile-placeholder-bg: #2C2C2E;
  
  --button-primary-bg: #0A84FF;
  --button-primary-hover: #0051D5;
  --button-secondary-bg: rgba(255, 255, 255, 0.1);
  --button-secondary-hover: rgba(255, 255, 255, 0.15);
  
  --input-border: rgba(255, 255, 255, 0.2);
  --input-focus-border: #0A84FF;
  
  --modal-bg: #1C1C1E;
  
  --toast-bg: #F5F5F7;
  --toast-text: #1D1D1F;
}

/* ===== APPLICATION DES VARIABLES ===== */
body {
  background-color: var(--bg-color);
  background-image: var(--bg-pattern);
  background-repeat: repeat;
  background-size: 96px 96px;
  color: var(--text-color);
}

.header,
.footer {
  background-color: var(--bg-color);
  border-color: var(--border-color);
}

.header__title,
.footer__text,
.modal__title,
.modal__message,
.form-label {
  color: var(--text-color);
}

.tile {
  background: var(--tile-bg);
}

.tile__image {
  background: var(--tile-placeholder-bg);
}

.modal__content {
  background: var(--modal-bg);
}

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

.modal__close:hover {
  color: var(--text-color-hover);
}

.form-input,
.form-textarea,
.form-select {
  background-color: var(--bg-color);
  color: var(--text-color);
  border-color: var(--input-border);
}

.theme-toggle,
.edit-button,
.add-tile-button,
.save-button {
  background: var(--button-secondary-bg);
  color: var(--text-color);
}

.theme-toggle:hover,
.edit-button:hover,
.add-tile-button:hover,
.save-button:hover {
  background: var(--button-secondary-hover);
}

.toast {
  background: var(--toast-bg);
  color: var(--toast-text, white);
}

/* ===== TRANSITIONS ===== */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}