/* ============================================================
   THEME.CSS — Variables de couleurs, typo et espacements
   ------------------------------------------------------------
   Modifiez UNIQUEMENT ce fichier pour changer le thème visuel.
   Toutes les couleurs et tailles du site sont définies ici.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Laila:wght@400;500;600;700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@400;500;600;700&family=Source+Sans+Pro:ital,wght@0,400;0,600;1,400&display=swap');

:root,
[data-theme="light"] {

  /* ===== PALETTE — MODIFIEZ ICI POUR CHANGER LES COULEURS ===== */
  /* Couleur principale (boutons, liens, accents) */
  --color-primary:        #7BC4B8;   /* Turquoise Cristalline */
  --color-primary-hover:  #6AA79C;   /* Turquoise Profonde */
  --color-primary-active: #446E66;   /* Turquoise Océane */
  --color-primary-light:  #DAEDEB;   /* Turquoise Vaporeux */

  /* Couleur secondaire (mises en valeur, astérisques, SAP) */
  --color-accent:         #53B36E;   /* Vert Émeraude */
  --color-accent-light:   #C5E2CD;   /* Vert Pastel */

  /* Couleur "succès" (validations) */
  --color-success:        #3a7a22;

  /* Fonds */
  --color-bg:             #f6f5f1;   /* Fond général de la page */
  --color-surface:        #faf9f6;   /* Sections alternées */
  --color-surface-2:      #ffffff;   /* Cartes (services, FAQ, etc.) */
  --color-surface-offset: #edeae4;   /* Petites zones grisées */

  /* Bordures et séparateurs */
  --color-divider:        #d8d5cf;
  --color-border:         #ccc9c2;

  /* Textes */
  --color-text:           #2C3E50;   /* Graphite Intense */
  --color-text-muted:     #706d65;   /* Paragraphes secondaires */
  --color-text-faint:     #b2afa8;   /* Labels, placeholders */
  --color-text-inverse:   #f8f7f3;   /* Texte sur fond sombre */

  /* ===== TYPOGRAPHIE ===== */
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Source Sans Pro', 'Helvetica Neue', sans-serif;
  --font-logo:    'Laila', sans-serif;
  --font-slogan:  'Montserrat', sans-serif;

  /* Tailles fluides (responsives automatiquement) */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-hero: clamp(2.75rem, 1rem + 6vw, 6rem);

  /* ===== ESPACEMENTS ===== */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem;--space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem;--space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;  --space-24: 6rem;

  /* ===== ARRONDIS ===== */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ===== OMBRES ===== */
  --shadow-sm: 0 1px 3px oklch(0.18 0.02 80 / 0.07);
  --shadow-md: 0 4px 14px oklch(0.18 0.02 80 / 0.09);
  --shadow-lg: 0 12px 36px oklch(0.18 0.02 80 / 0.13);

  /* ===== LARGEURS DE CONTENU ===== */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1160px;

  /* ===== TRANSITIONS ===== */
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   THÈME SOMBRE — variantes turquoise foncées/désaturées
   ============================================================ */
[data-theme="dark"] {
  --color-primary:        #8ACFC4;   /* Turquoise éclaircie, lisible sur fond sombre */
  --color-primary-hover:  #72BDB2;
  --color-primary-active: #5AA59A;
  --color-primary-light:  #1a3438;   /* Fond turquoise foncé pour badges */

  --color-accent:         #6DC985;   /* Vert Émeraude éclairci */
  --color-accent-light:   #1a3328;   /* Fond vert foncé */

  --color-success:        #68b043;

  --color-bg:             #0f1318;   /* Fond très sombre */
  --color-surface:        #161c24;   /* +1 palier */
  --color-surface-2:      #1d2632;   /* Cartes, FAQ */
  --color-surface-offset: #24303f;   /* Zones grisées */

  --color-divider:        #2c3a4a;
  --color-border:         #364858;

  --color-text:           #f5f8fa;   /* Texte principal — blanc cassé froid */
  --color-text-muted:     #b8cdd8;
  --color-text-faint:     #839eb0;
  --color-text-inverse:   #0f1318;

  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 36px oklch(0 0 0 / 0.4);
}

/* Préférence système (si l'utilisateur n'a pas choisi) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-primary:        #8ACFC4;
    --color-primary-hover:  #72BDB2;
    --color-primary-active: #5AA59A;
    --color-primary-light:  #1a3438;
    --color-accent:         #6DC985;
    --color-accent-light:   #1a3328;
    --color-success:        #68b043;
    --color-bg:             #0f1318;
    --color-surface:        #161c24;
    --color-surface-2:      #1d2632;
    --color-surface-offset: #24303f;
    --color-divider:        #2c3a4a;
    --color-border:         #364858;
    --color-text:           #f5f8fa;
    --color-text-muted:     #b8cdd8;
    --color-text-faint:     #839eb0;
    --color-text-inverse:   #0f1318;
  }
}