/* ============================================================
   tokens.css — Variables globales + 3 thèmes via [data-theme]
   ============================================================ */

/* ── Échelle typographique (commune aux 3 thèmes) ── */
:root {
  --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-h3:   clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-h2:   clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  --fs-h1:   clamp(2.5rem, 1.5rem + 5vw, 5rem);

  --lh-body:   1.6;
  --lh-title:  1.1;
  --lh-tight:  1.05;

  /* ── Espacement base 8 px ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-section: clamp(64px, 10vw, 120px);

  /* ── Conteneur & rayons ── */
  --container-max: 1120px;
  --radius-s:  12px;
  --radius-m:  20px;
  --radius-pill: 999px;

  /* ── Cible tactile ── */
  --touch-target: 48px;

  /* ── Mouvement ── */
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --ease:       cubic-bezier(.2, .7, .2, 1);

  /* ── Z-index ── */
  --z-base:    10;
  --z-overlay: 20;
  --z-nav:     30;
  --z-modal:   50;
}

/* ============================================================
   THÈME PASTEL — défaut (éditorial)
   ============================================================ */
[data-theme="pastel"],
:root {
  --color-bg:        #FBF8F4;
  --color-surface:   #FFFFFF;
  --color-text:      #1D2024;
  --color-text-mute: #4A4F55;
  --color-accent:    #F2A28C;
  --color-accent-text: #963820;
  --color-mint:      #A9D1D3;
  --color-lavender:  #E4DAFA;
  --color-peach:     #FBE4DC;
  --color-border:    #E8E3DC;
  --color-field-border: #7D838A;
  --color-btn-text:  #1D2024;
  --color-error:     #C53030;
  --color-placeholder: #4A4F55;

  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;
  --fw-regular:   400;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Focus ring */
  --focus-color: #963820;
  --focus-width: 3px;
  --focus-offset: 2px;
}

/* ============================================================
   THÈME SOMBRE — glass sélectif
   ============================================================ */
[data-theme="dark"] {
  --color-bg:        #0E0B1A;
  --color-surface:   rgba(255, 255, 255, .06);
  --color-text:      #F4F1FA;
  --color-text-mute: #B9B2CC;
  --color-accent:    #FF8A5B;
  --color-accent-text: #FF8A5B;
  --color-mint:      #6ECFCF;
  --color-lavender:  #C4B8F0;
  --color-peach:     #FF8A5B;
  --color-border:    rgba(255, 255, 255, .12);
  --color-field-border: #7C7596;
  --color-btn-text:  #0E0B1A;
  --color-error:     #FC8181;
  --color-placeholder: #B9B2CC;

  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;
  --fw-regular:   400;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --focus-color: #FF8A5B;
  --focus-width: 3px;
  --focus-offset: 2px;
}

/* ============================================================
   THÈME MONO — typographique, très sobre
   ============================================================ */
[data-theme="mono"] {
  --color-bg:        #0A0A0A;
  --color-surface:   #111111;
  --color-text:      #EDEDED;
  --color-text-mute: #A1A1A1;
  --color-accent:    #FFFFFF;
  --color-accent-text: #FFFFFF;
  --color-mint:      #EDEDED;
  --color-lavender:  #EDEDED;
  --color-peach:     #EDEDED;
  --color-border:    #262626;
  --color-field-border: #6F6F6F;
  --color-btn-text:  #0A0A0A;
  --color-error:     #FF6B6B;
  --color-placeholder: #A1A1A1;

  --font-display: 'Georgia', 'Times New Roman', serif;
  --font-body:    'Montserrat', system-ui, sans-serif;
  --fw-regular:   400;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --focus-color: #FFFFFF;
  --focus-width: 3px;
  --focus-offset: 2px;
}