/* ============================================================
   CLAIRE DEVILLIERS — Design Tokens
   Palette identité visuelle officielle
   Vert principal #2AABAA · Texte gris #3D3A39
   Beige #C4B87A · Bleu-vert #72BEC0 · Corail #E8583A
   Fond blanc #ffffff
   ============================================================ */

:root,
[data-theme='light'] {
  /* Fonds */
  --color-bg:             #ffffff;
  --color-surface:        #f8fafa;
  --color-surface-2:      #eef6f6;
  --color-surface-offset: #e2f0f0;
  --color-divider:        #d0e8e8;
  --color-border:         #b8d8d8;

  /* Textes */
  --color-text:         #3d3a39;
  --color-text-muted:   #7a7572;
  --color-text-faint:   #b0adab;
  --color-text-inverse: #ffffff;

  /* Vert principal — couleur dominante */
  --color-primary:           #2aabaa;
  --color-primary-hover:     #229190;
  --color-primary-active:    #1a7170;
  --color-primary-highlight: #e0f4f4;

  /* Beige/kaki — accent chaud */
  --color-gold:           #c4b87a;
  --color-gold-hover:     #a89e62;
  --color-gold-highlight: #f5f1e0;

  /* Bleu-vert clair — accent secondaire */
  --color-accent:           #72bec0;
  --color-accent-hover:     #5aa8aa;
  --color-accent-highlight: #e8f6f6;

  /* Corail — accent vif, utilisation ponctuelle */
  --color-coral:           #e8583a;
  --color-coral-hover:     #cc4528;
  --color-coral-highlight: #fdeee9;

  /* Géométrie */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-full: 9999px;
  /* Signature asymétrique : haut-gauche & bas-droite arrondis, haut-droite & bas-gauche droits */
  --radius-card: var(--radius-lg) 0 var(--radius-lg) 0;
  --radius-card-alt: 0 var(--radius-lg) 0 var(--radius-lg);

  /* Transitions */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Ombres — teintées vert pour cohérence marque */
  --shadow-sm: 0 1px 3px rgba(42, 171, 170, 0.08);
  --shadow-md: 0 4px 16px rgba(42, 171, 170, 0.12);
  --shadow-lg: 0 12px 40px rgba(42, 171, 170, 0.16);

  /* Typographie — échelle fluide */
  --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-3xl:  clamp(2.5rem,   1rem + 4vw,      5rem);
  --text-hero: clamp(3rem,     0.5rem + 7vw,    8rem);

  /* Espacement */
  --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;
  --space-32: 8rem;

  /* Largeurs de contenu */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* Polices */
  --font-display: 'Cormorant', 'Georgia', serif;
  --font-body:    'Switzer', 'Helvetica Neue', sans-serif;
}

[data-theme='dark'] {
  --color-bg:             #111c1c;
  --color-surface:        #162020;
  --color-surface-2:      #1c2a2a;
  --color-surface-offset: #213232;
  --color-divider:        #2a3e3e;
  --color-border:         #335050;

  --color-text:         #e8e4dc;
  --color-text-muted:   #9aa8a8;
  --color-text-faint:   #5a7070;
  --color-text-inverse: #111c1c;

  --color-primary:           #3dc8c7;
  --color-primary-hover:     #2aabaa;
  --color-primary-active:    #229190;
  --color-primary-highlight: #1a3030;

  --color-gold:           #d4c88a;
  --color-gold-hover:     #baa870;
  --color-gold-highlight: #2a2810;

  --color-accent:           #8ed0d2;
  --color-accent-hover:     #72bec0;
  --color-accent-highlight: #142828;

  --color-coral:           #f07055;
  --color-coral-hover:     #e8583a;
  --color-coral-highlight: #2a1510;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}