========================================
🎨 CONFIGURATION THÈME FAILDAILY
========================================

📁 EMPLACEMENT DES FICHIERS THEME
========================================

1. VARIABLES PRINCIPALES:
   📄 frontend/src/theme/variables.scss
   - Polices (Caveat, Comfortaa, Kalam)
   - Couleurs principales (#FF6B9D rose, #A8E6CF mint, etc.)
   - Espacements, ombres, animations
   - Rayons de bordure "imparfaits"

2. THÈME CLAIR (PAR DÉFAUT):
   📄 frontend/src/theme/light-theme.css
   - Couleurs mode clair (bleu #6366f1, vert #10b981)
   - Background: #dbeafe (bleu pastel)
   - Texte: #1e293b (gris foncé)
   - Surface: #ffffff (blanc)

3. THÈME SOMBRE:
   📄 frontend/src/theme/dark-theme.css
   - Couleurs mode sombre
   - Background sombre
   - Texte clair

4. STYLES GLOBAUX:
   📄 frontend/src/global.scss
   - Architecture et layout
   - Import des thèmes
   - Espacements standardisés

========================================
🎨 COULEURS ACTUELLES
========================================

COULEURS PRINCIPALES (variables.scss):
--ion-color-primary: #FF6B9D (Rose FailDaily)
--ion-color-secondary: #A8E6CF (Mint)
--ion-color-tertiary: #FFE4B5 (Beige)

PALETTE IMPERFECTION:
--fail-pink: #FF6B9D
--fail-mint: #A8E6CF
--fail-peach: #FFAB91
--fail-lavender: #CE93D8
--fail-yellow: #FFF176
--fail-blue: #81D4FA

MODE CLAIR (light-theme.css):
--faildaily-primary: #6366f1 (Indigo)
--faildaily-secondary: #10b981 (Vert)
--faildaily-background: #dbeafe (Bleu pastel)
--faildaily-text-primary: #1e293b

RÉACTIONS:
--reaction-courage: #ef4444 (Rouge)
--reaction-laugh: #f59e0b (Orange)
--reaction-empathy: #3b82f6 (Bleu)
--reaction-support: #10b981 (Vert)

========================================
✍️ POLICES (FONTSOURCE - LOCAL)
========================================

--fail-font-handwriting: 'Caveat'
   Poids: 400, 600, 700
   Usage: Titres manuscrits

--fail-font-comfort: 'Comfortaa'
   Poids: 300, 400, 600
   Usage: Corps de texte

--fail-font-system: 'Comfortaa' + fallbacks
   Usage: Interface principale

Autre: 'Kalam' (400, 700)
   Usage: Éléments décoratifs

========================================
📐 ESPACEMENTS & RAYONS
========================================

ESPACEMENTS:
--fail-spacing-xs: 4px
--fail-spacing-sm: 8px
--fail-spacing-md: 16px
--fail-spacing-lg: 24px
--fail-spacing-xl: 32px

RAYONS "IMPARFAITS":
--fail-radius-small: 8px 12px 10px 14px
--fail-radius-medium: 15px 18px 16px 19px
--fail-radius-large: 20px 25px 22px 28px

OMBRES:
--fail-shadow-soft: 0 2px 10px rgba(0,0,0,0.08)
--fail-shadow-medium: 0 4px 15px rgba(0,0,0,0.12)
--fail-shadow-strong: 0 8px 25px rgba(0,0,0,0.15)

========================================
🔧 MODIFIER LE THÈME
========================================

Pour changer les COULEURS:
   Éditer: frontend/src/theme/light-theme.css
   (ou dark-theme.css pour mode sombre)

Pour changer les POLICES:
   Éditer: frontend/src/theme/variables.scss
   Lignes 1-9 (imports) et 86-88 (variables)

Pour changer ESPACEMENTS/RAYONS:
   Éditer: frontend/src/theme/variables.scss
   Lignes 71-99

Pour ARCHITECTURE/LAYOUT:
   Éditer: frontend/src/global.scss

========================================
📌 NOTES IMPORTANTES
========================================

- Polices chargées localement (Fontsource) = rapide
- Thème clair appliqué par défaut
- Mode sombre disponible via .dark class
- Variables CSS = changements en temps réel
- Rayons imparfaits = design "organique"

========================================