/* ============================================================
   ÉMALIA — Design Tokens
   Direction artistique : Editorial Luxury × Soft Structuralism
   Palette ivoire médical + teal apaisant + accent corail chaud
   ============================================================ */

:root {
  /* ---- Couleurs primitives ---- */
  --ivory:        #F7F3EC;   /* fond principal, ivoire médical doux */
  --cream:        #FCFAF5;   /* surfaces claires */
  --paper:        #FFFFFF;   /* surfaces pures (cards premium) */
  --sand:         #EDE4D5;   /* surfaces nuancées, sable chaud */
  --sand-deep:    #E3D7C4;

  --teal-950:     #0E2A26;
  --teal-900:     #143733;
  --teal-800:     #1A4A43;
  --teal-700:     #1F5C53;   /* teal profond */
  --teal-600:     #277568;   /* PRIMAIRE */
  --teal-500:     #359183;
  --teal-300:     #8FC4B8;
  --teal-100:     #DCEDE7;   /* menthe claire */
  --teal-50:      #ECF5F1;

  --coral-600:    #C56A4C;
  --coral-500:    #DB8163;   /* accent chaud, usage parcimonieux */
  --coral-200:    #F2D2C4;
  --coral-50:     #FBEDE6;

  --gold:         #C9A24B;   /* étoiles / détails précieux */

  --ink-900:      #16211F;   /* near-black vert chaud */
  --ink-700:      #283733;
  --ink-500:      #4C5B57;   /* texte secondaire */
  --ink-400:      #5A6864;   /* texte tertiaire / muted — AA sur ivoire (~4.6:1) */
  --line:         #E5DCCD;   /* hairlines chaudes */
  --line-soft:    #EFE8DB;

  /* ---- Tokens sémantiques (LIGHT, prioritaire) ---- */
  --bg:           var(--ivory);
  --bg-alt:       var(--cream);
  --surface:      var(--paper);
  --surface-2:    var(--cream);
  --surface-sand: var(--sand);
  --shell:        rgba(22, 33, 31, 0.04);   /* coque double-bezel */
  --shell-line:   rgba(22, 33, 31, 0.06);

  --text:         var(--ink-900);
  --text-soft:    var(--ink-500);
  --text-muted:   var(--ink-400);
  --text-invert:  #F7F3EC;

  --primary:      var(--teal-600);
  --primary-deep: var(--teal-700);
  --primary-soft: var(--teal-100);
  --primary-tint: var(--teal-50);
  --accent:       var(--coral-500);
  --accent-soft:  var(--coral-50);

  --border:       var(--line);
  --border-soft:  var(--line-soft);
  --ring:         rgba(39, 117, 104, 0.35);

  /* ---- Typographie ---- */
  --font-display: "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle typographique fluide (clamp : min mobile → max desktop) */
  --fs-eyebrow:   clamp(0.7rem, 0.67rem + 0.12vw, 0.76rem);
  --fs-xs:        clamp(0.78rem, 0.75rem + 0.14vw, 0.84rem);
  --fs-sm:        clamp(0.88rem, 0.84rem + 0.2vw, 0.96rem);
  --fs-base:      clamp(1rem, 0.96rem + 0.22vw, 1.08rem);
  --fs-lg:        clamp(1.1rem, 1.03rem + 0.34vw, 1.22rem);
  --fs-xl:        clamp(1.28rem, 1.13rem + 0.7vw, 1.5rem);
  --fs-2xl:       clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem);
  --fs-3xl:       clamp(2.1rem, 1.3rem + 3vw, 3.1rem);
  --fs-4xl:       clamp(2.8rem, 1.4rem + 5vw, 4.6rem);
  --fs-hero:      clamp(3rem, 1.2rem + 7vw, 6rem);

  --lh-tight:     1.04;
  --lh-snug:      1.18;
  --lh-base:      1.62;
  --tracking-eyebrow: 0.22em;
  --tracking-wide:    0.04em;

  /* ---- Espacements (rythme spatial généreux) ---- */
  /* micro-gaps : fixes (clamp inutile sous ~16px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  /* rythme structurant : fluide mobile → desktop */
  --space-5:  clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --space-6:  clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  --space-7:  clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --space-8:  clamp(2.4rem, 1.5rem + 3.6vw, 4rem);
  --space-9:  clamp(3.25rem, 1.9rem + 5.4vw, 6rem);
  --space-10: clamp(4rem, 2.2rem + 7.2vw, 8rem);
  --space-11: clamp(5.5rem, 2.8rem + 10.8vw, 11rem);

  --container:    1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --gutter:       clamp(1.25rem, 4vw, 3rem);

  /* ---- Rayons (squircles exagérés) ---- */
  --r-xs: 0.5rem;
  --r-sm: 0.75rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-2xl: 2.75rem;
  --r-pill: 999px;

  /* ---- Ombres (diffuses, ambiantes, jamais dures) ---- */
  --shadow-xs:  0 1px 2px rgba(22, 33, 31, 0.04);
  --shadow-sm:  0 4px 14px -6px rgba(22, 33, 31, 0.10);
  --shadow-md:  0 18px 40px -22px rgba(22, 33, 31, 0.18);
  --shadow-lg:  0 34px 70px -34px rgba(22, 33, 31, 0.26);
  --shadow-teal: 0 24px 50px -24px rgba(31, 92, 83, 0.45);
  --inset-hi:   inset 0 1px 1px rgba(255, 255, 255, 0.55);

  /* ---- Motion ---- */
  --ease-soft:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    220ms;
  --dur-base:    420ms;
  --dur-slow:    760ms;

  --z-nav: 100;
  --z-overlay: 200;
  --z-grain: 300;
}

/* ============================================================
   DARK MODE (cohérent, secondaire — clinique nocturne feutrée)
   ============================================================ */
[data-theme="dark"] {
  --bg:           #10201D;
  --bg-alt:       #142824;
  --surface:      #173029;
  --surface-2:    #163B33;
  --surface-sand: #1C332D;
  --shell:        rgba(255, 255, 255, 0.04);
  --shell-line:   rgba(255, 255, 255, 0.08);

  --text:         #EFE8DB;
  --text-soft:    #B6C4BE;
  --text-muted:   #8AA29A;
  --text-invert:  #10201D;

  --primary:      var(--teal-500);
  --primary-deep: var(--teal-300);
  --primary-soft: rgba(53, 145, 131, 0.18);
  --primary-tint: rgba(53, 145, 131, 0.10);
  --accent:       var(--coral-500);
  --accent-soft:  rgba(219, 129, 99, 0.14);

  --border:       rgba(255, 255, 255, 0.10);
  --border-soft:  rgba(255, 255, 255, 0.06);
  --ring:         rgba(143, 196, 184, 0.45);

  --shadow-sm:  0 4px 14px -6px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 18px 40px -22px rgba(0, 0, 0, 0.6);
  --shadow-lg:  0 34px 70px -34px rgba(0, 0, 0, 0.7);
  --inset-hi:   inset 0 1px 1px rgba(255, 255, 255, 0.08);
}