/* ============================================
   VARIABLES.CSS — Design tokens Dream by Billie
   ============================================ */

:root {
  /* Couleurs — palette marque */
  --color-florale: #fffcf3;
  --color-harvest: #f5822e;
  --color-harvest-light: #fa9b6c;
  --color-harvest-extra-light: #fbb9a0;
  --color-harvest-white: #fdece8;
  --color-rose-kiss: #e96b92;
  --color-rose-kiss-light: #ff9dbb;
  --color-rose-kiss-extra-light: #ffcedb;
  --color-rose-kiss-white: #fdebf1;
  --color-dark-coffee: #2a2017;
  --color-dream-sky: #c9cce0;

  /* Couleurs — dates / services (nuage + fond contenu) */
  --color-balade: #3fa89e;
  --color-balade-soft: #9eddd4;
  --color-balade-pale: #d5f3ee;
  --color-foraine: #e8455a;
  --color-foraine-soft: #ff9eab;
  --color-foraine-pale: #ffd6dc;
  --color-etoiles: #3d4f8f;
  --color-etoiles-soft: #a8b4d9;
  --color-etoiles-pale: #d5dbeb;

  /* Couleurs — sémantiques */
  --color-primary: var(--color-harvest);
  --color-secondary: var(--color-rose-kiss);
  --color-bg: var(--color-florale);
  --color-bg-soft: var(--color-rose-kiss-white);
  --color-text: var(--color-dark-coffee);
  --color-text-light: var(--color-harvest-light);
  --color-border: var(--color-harvest-extra-light);

  /* Typographie
     Bentham = la marque parle
     Buenard = la marque explique
     Buenard bold = boutons XL, Buenard regular = boutons L / M / S
     Indie Flower = la marque chuchote une émotion
  */
  --font-heading: 'Bentham', serif;
  --font-body: 'Buenard', serif;
  --font-whisper: 'Indie Flower', cursive;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3rem;
  --font-size-hero: 4rem;
  --font-size-footer-newsletter: 2rem;

  /* Letter-spacing — Bentham / Buenard -6% en maquette */
  --letter-spacing-tight: -0.06em;

  /* Espacements */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Bordures & rayons */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-img: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --radius-btn-xl: 1rem;
  --radius-btn-lg: 0.75rem;
  --radius-btn-md: 0.625rem;
  --radius-btn-sm: 0.5rem;
  --radius-btn: var(--radius-btn-xl);
  --stroke-sticker: 0.06em;
  --stroke-sticker-sm: 0.045em;

  /* Boutons — hauteurs, paddings et typos (maquette Figma) */
  --btn-height-xl: 3.5rem;
  --btn-height-lg: 3rem;
  --btn-height-md: 2.5rem;
  --btn-height-sm: 2rem;
  --btn-padding-xl: 2.5rem;
  --btn-padding-lg: 2rem;
  --btn-padding-md: 1.5rem;
  --btn-padding-sm: 1.25rem;
  --font-size-btn-lg: 1.125rem;
  --font-size-btn-sm: 1rem;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(42, 32, 23, 0.08);
  --shadow-md: 0 4px 12px rgba(42, 32, 23, 0.1);
  --shadow-lg: 0 8px 24px rgba(42, 32, 23, 0.12);
  --shadow-btn:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 1px -0.5px rgba(0, 0, 0, 0.06),
    0 3px 3px -1.5px rgba(0, 0, 0, 0.06),
    0 6px 6px -3px rgba(0, 0, 0, 0.06),
    0 12px 12px -6px rgba(0, 0, 0, 0.06),
    0 24px 24px -12px rgba(0, 0, 0, 0.06);
  --shadow-btn-hover:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 2px -0.5px rgba(0, 0, 0, 0.08),
    0 6px 6px -1.5px rgba(0, 0, 0, 0.08),
    0 12px 12px -3px rgba(0, 0, 0, 0.08),
    0 20px 20px -6px rgba(0, 0, 0, 0.08),
    0 32px 32px -12px rgba(0, 0, 0, 0.1);
  --btn-lift: -0.125rem;

  /* Largeurs max */
  --max-width-content: 720px;
  --max-width-site: 1180px;
  --max-width-footer: 1320px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
  --sticker-pop-duration: 0.7s;
  --cta-arrow-shift: 0.25rem;

  /* Bord nuage navbar — tuile 16 / rayon 10 = léger chevauchement */
  --header-cloud-width: 2rem;
  --header-cloud-height: 1.25rem;
  /* Recouvre la micro-ligne anti-alias (surtout mobile) */
  --cloud-seam: 2px;

  /* Bord nuage section deadline — festons plus marqués */
  --deadline-cloud-width: 2.75rem;
  --deadline-cloud-height: 1.65rem;

  /* Papier scrapbook */
  --color-journal-paper: #f6efe4;
  --color-journal-paper-warm: #f3e8d6;
}