/**
 * ============================================================
 * PLATYPUS COACHING — Design Tokens
 * ============================================================
 * Source unique de vérité pour toutes les variables CSS.
 * Importer ce fichier en premier dans toute page/app.
 *
 * @import url('../../_base/design-tokens.css');
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Sans:wght@300;400;500&family=Cinzel:wght@400;600&display=swap');

:root {

  /* ----------------------------------------------------------
   * COULEURS — Palette terre chaude
   * ---------------------------------------------------------- */

  /* Fonds */
  --cream:           #F7F2EA;
  --beige:           #EDE4D4;
  --sand:            #D9CCBA;
  --white:           #FEFCF8;

  /* Accent principal — Terracotta */
  --terracotta:      #C4714A;
  --terracotta-light:#D4855E;
  --terracotta-dark: #a35a38;

  /* Accent secondaire — Sauge */
  --sage:            #7A9B7F;
  --sage-light:      #A8C4AC;
  --sage-dark:       #5A7A5F;

  /* Neutres sombres */
  --brown:           #4A3728;
  --brown-mid:       #6B4F3A;
  --text:            #2E2318;
  --text-muted:      #7A6A58;
  --dark:            #1A120A;

  /* Accents spéciaux */
  --lab-accent:      #3D6B5C;

  /* Overlays & transparences */
  --overlay-cream:   rgba(247, 242, 234, 0.92);
  --overlay-brown:   rgba(74, 55, 40, 0.85);
  --overlay-dark:    rgba(26, 18, 10, 0.6);
  --border-subtle:   rgba(196, 113, 74, 0.15);
  --border-sand:     rgba(74, 55, 40, 0.12);

  /* ----------------------------------------------------------
   * TYPOGRAPHIE
   * ---------------------------------------------------------- */

  /* Familles */
  --font-display:    'Cormorant Garamond', Georgia, serif;
  --font-body:       'DM Sans', system-ui, sans-serif;
  --font-cinzel:     'Cinzel', Georgia, serif;

  /* Taille de base */
  --text-base:       16px;

  /* Échelle fluide — Titres */
  --text-hero:       clamp(3rem,   7vw, 6rem);
  --text-h1:         clamp(2.5rem, 5vw, 4.5rem);
  --text-h2:         clamp(2rem,   4vw, 3.2rem);
  --text-h3:         clamp(1.4rem, 2.5vw, 2rem);
  --text-h4:         clamp(1.1rem, 1.8vw, 1.4rem);

  /* Échelle fixe — Corps */
  --text-lg:         1.15rem;
  --text-md:         1rem;
  --text-sm:         0.875rem;
  --text-xs:         0.75rem;
  --text-2xs:        0.65rem;

  /* Graisses */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Hauteurs de ligne */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   1.9;

  /* Espacement de lettres */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.2em;

  /* ----------------------------------------------------------
   * ESPACEMENT
   * ---------------------------------------------------------- */

  --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 */

  /* ----------------------------------------------------------
   * BORDURES & RAYONS
   * ---------------------------------------------------------- */

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
   * OMBRES
   * ---------------------------------------------------------- */

  --shadow-xs:  0 1px 3px rgba(44, 31, 20, 0.06);
  --shadow-sm:  0 2px 8px rgba(44, 31, 20, 0.08);
  --shadow-md:  0 4px 18px rgba(44, 31, 20, 0.10);
  --shadow-lg:  0 8px 32px rgba(44, 31, 20, 0.14);
  --shadow-xl:  0 16px 56px rgba(44, 31, 20, 0.18);

  /* ----------------------------------------------------------
   * Z-INDEX
   * ---------------------------------------------------------- */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  50;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-toast:     400;

  /* ----------------------------------------------------------
   * ANIMATIONS & EASING
   * ---------------------------------------------------------- */

  --ease-silk:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  700ms;
  --duration-slowest: 1000ms;

  /* ----------------------------------------------------------
   * BREAKPOINTS (référence — à utiliser dans les @media)
   * ---------------------------------------------------------- */
  /* Ces valeurs ne peuvent pas être utilisées directement dans
     les media queries, mais servent de documentation :
     --bp-sm: 480px  | mobile large
     --bp-md: 768px  | tablette
     --bp-nav: 900px | menu burger / navigation
     --bp-lg: 1024px | desktop
     --bp-xl: 1280px | grand écran
     --bp-2xl: 1440px | très grand écran              */

  /* ----------------------------------------------------------
   * LAYOUT
   * ---------------------------------------------------------- */

  --max-width:     1200px;
  --nav-height:    62px;
  --nav-height-sm: 52px;
  --section-pad-y: clamp(4rem, 8vw, 8rem);
  --section-pad-x: clamp(1.2rem, 4vw, 2.5rem);

}