/* ============================================================
   DESIGN TOKENS — Cabinet Olivia Mariol
   ------------------------------------------------------------
   Ce fichier centralise TOUTE la charte graphique du site.
   Pour modifier l'identité visuelle (couleurs, typographies,
   espacements, etc.), éditez UNIQUEMENT ce fichier.
   Le reste du site (styles.css, HTML) consomme ces variables.
   ============================================================ */

:root {

  /* ============================================================
     1. COULEURS
     ============================================================ */

  /* Palette principale */
  --color-primary:        #0E1B2C;  /* Bleu nuit — titres, header, footer */
  --color-secondary:      #1E3A5F;  /* Bleu profond — liens, accents */
  --color-accent:         #A88B4A;  /* Or pâle — filets, hover, focus */

  /* Fonds */
  --color-bg:             #FAF8F3;  /* Ivoire — fond principal */
  --color-bg-alt:         #F2EFE7;  /* Blanc cassé — sections alternées */
  --color-bg-dark:        #0E1B2C;  /* Section sombre (header, footer) */

  /* Textes */
  --color-text:           #1A1A1A;  /* Anthracite — corps de texte */
  --color-text-muted:     #5A5A5A;  /* Gris ardoise — secondaire */
  --color-text-light:     #FAF8F3;  /* Ivoire — sur fond sombre */
  --color-text-light-muted:#C9C2B5; /* Gris chaud clair sur fond sombre */

  /* Bordures */
  --color-border:         #D8D2C4;  /* Gris chaud — séparateurs */
  --color-border-dark:    rgba(168, 139, 74, 0.3); /* Or pâle transparent */

  /* États */
  --color-link:           #1E3A5F;
  --color-link-hover:     #A88B4A;
  --color-focus-ring:     rgba(168, 139, 74, 0.25);
  --color-success:        #5A7A4F;
  --color-error:          #8B2C2C;

  /* Ombres */
  --shadow-soft:          0 4px 16px rgba(14, 27, 44, 0.06);
  --shadow-medium:        0 8px 24px rgba(14, 27, 44, 0.08);
  --shadow-strong:        0 16px 40px rgba(14, 27, 44, 0.12);


  /* ============================================================
     2. TYPOGRAPHIE
     ============================================================ */

  /* Familles */
  --font-serif:           'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:            'SF Mono', Consolas, 'Liberation Mono', monospace;

  /* Tailles (responsive via clamp) */
  --text-display:         clamp(2.75rem, 6vw + 1rem, 4.5rem);  /* Hero */
  --text-h1:              clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --text-h2:              clamp(1.75rem, 3vw + 0.75rem, 2.5rem);
  --text-h3:              clamp(1.375rem, 2vw + 0.5rem, 1.75rem);
  --text-h4:              clamp(1.125rem, 1vw + 0.5rem, 1.25rem);
  --text-lead:            clamp(1.125rem, 0.75vw + 1rem, 1.375rem);
  --text-body:            clamp(1rem, 0.25vw + 0.9rem, 1.0625rem);
  --text-small:           0.9375rem;
  --text-tiny:            0.8125rem;

  /* Poids */
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;

  /* Hauteurs de ligne */
  --leading-tight:        1.15;
  --leading-snug:         1.3;
  --leading-normal:       1.65;

  /* Espacement des lettres */
  --tracking-tight:       -0.01em;
  --tracking-normal:      0;
  --tracking-wide:        0.05em;
  --tracking-wider:       0.12em;
  --tracking-widest:      0.18em;


  /* ============================================================
     3. ESPACEMENT (basé sur 4px)
     ============================================================ */

  --space-1:              0.25rem;   /* 4px */
  --space-2:              0.5rem;    /* 8px */
  --space-3:              0.75rem;   /* 12px */
  --space-4:              1rem;      /* 16px */
  --space-5:              1.25rem;   /* 20px */
  --space-6:              1.5rem;    /* 24px */
  --space-8:              2rem;      /* 32px */
  --space-10:             2.5rem;    /* 40px */
  --space-12:             3rem;      /* 48px */
  --space-16:             4rem;      /* 64px */
  --space-20:             5rem;      /* 80px */
  --space-24:             6rem;      /* 96px */
  --space-32:             8rem;      /* 128px */
  --space-40:             10rem;     /* 160px */


  /* ============================================================
     4. LARGEURS / CONTENEURS
     ============================================================ */

  --width-xs:             480px;
  --width-sm:             640px;
  --width-readable:       720px;   /* Texte courant — longueur lisible */
  --width-content:        1024px;  /* Sections standard */
  --width-wide:           1280px;  /* Largeur générale du site */


  /* ============================================================
     5. BORDURES
     ============================================================ */

  --radius-none:          0;
  --radius-sm:            2px;
  --radius-md:            4px;
  --radius-full:          9999px;

  --border-thin:          1px solid var(--color-border);
  --border-accent:        2px solid var(--color-accent);
  --border-thick:         3px solid var(--color-accent);


  /* ============================================================
     6. TRANSITIONS
     ============================================================ */

  --transition-fast:      0.15s ease;
  --transition-base:      0.25s ease;
  --transition-slow:      0.4s ease;
  --transition-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);


  /* ============================================================
     7. LAYOUT
     ============================================================ */

  --header-height:        80px;
  --header-height-scrolled: 64px;
  --footer-padding:       var(--space-16);

  --section-padding-y:    clamp(var(--space-16), 8vw, var(--space-24));
  --section-padding-x:    clamp(var(--space-4), 4vw, var(--space-8));


  /* ============================================================
     8. Z-INDEX
     ============================================================ */

  --z-base:               1;
  --z-dropdown:           10;
  --z-sticky:             50;
  --z-header:             100;
  --z-modal:              200;
  --z-toast:              300;
}


/* ============================================================
   PRÉFÉRENCES UTILISATEUR
   ============================================================ */

/* Désactive les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:  0.01ms;
    --transition-base:  0.01ms;
    --transition-slow:  0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}