/* ============================================================
   SIMULATEUR-LOCATION.COM — DESIGN TOKENS v7 "Coral"
   Design language: Airbnb × Qonto × Apple × Papernest
   ============================================================ */

:root {

  /* ─── BRAND COLORS ─────────────────────────────────────── */

  --coral-50:   #FFF1F1;
  --coral-100:  #FFE0E1;
  --coral-200:  #FFC2C5;
  --coral-300:  #FF9095;
  --coral-400:  #FF7176;
  --coral-500:  #FF5A5F;   /* primary */
  --coral-600:  #E94046;
  --coral-700:  #C92E33;
  --coral-800:  #9F2226;

  --purple-50:  #F5F2FF;
  --purple-100: #EFEBFF;
  --purple-200: #DBD2FF;
  --purple-300: #B8A5FF;
  --purple-400: #957EFF;
  --purple-500: #7B61FF;   /* accent secondary */
  --purple-600: #5C40E0;
  --purple-700: #4632B5;

  --mint-50:    #ECFEF8;
  --mint-100:   #D5FBF3;
  --mint-200:   #A9F4E4;
  --mint-300:   #6DE6CF;
  --mint-400:   #3CD9BC;
  --mint-500:   #2DD4BF;   /* success */
  --mint-600:   #14A89A;
  --mint-700:   #0E867C;

  --navy-300:   #94A3B8;
  --navy-400:   #64748B;
  --navy-500:   #475569;
  --navy-600:   #334155;
  --navy-700:   #1E293B;
  --navy-800:   #16213A;
  --navy-900:   #0F172A;   /* text & footer */


  /* ─── BACKGROUNDS ──────────────────────────────────────── */

  --bg-cream:   #FFF9F7;
  --bg-light:   #F8FAFC;
  --bg-card:    #FFFFFF;
  --bg-muted:   #F1F5F9;


  /* ─── SEMANTIC ─────────────────────────────────────────── */

  --text-1:     var(--navy-900);
  --text-2:     var(--navy-500);
  --text-3:     var(--navy-400);
  --text-inv:   #FFFFFF;

  --link:       var(--coral-600);
  --link-hover: var(--coral-700);

  --border-soft:rgba(15, 23, 42, .08);
  --border-mid: rgba(15, 23, 42, .14);
  --border-strong: rgba(15, 23, 42, .22);

  --success:    var(--mint-600);
  --success-bg: var(--mint-50);
  --warning:    #F59E0B;
  --warning-bg: #FFFBEB;
  --danger:     var(--coral-700);
  --danger-bg:  var(--coral-50);
  --info:       var(--purple-600);
  --info-bg:    var(--purple-50);


  /* ─── GRADIENTS ────────────────────────────────────────── */

  --grad-primary:   linear-gradient(135deg, #FF5A5F 0%, #7B61FF 100%);
  --grad-secondary: linear-gradient(135deg, #FF5A5F 0%, #E8A93C 100%);
  --grad-sunset:    linear-gradient(135deg, #FF7176 0%, #FF5A5F 50%, #C92E33 100%);
  --grad-soft:      linear-gradient(180deg, #FFF9F7 0%, #FFFFFF 100%);
  --grad-cream:     linear-gradient(180deg, #FFFFFF 0%, #FFF9F7 100%);
  --grad-mint:      linear-gradient(135deg, #2DD4BF 0%, #14A89A 100%);


  /* ─── TYPOGRAPHY (Poppins) ─────────────────────────────── */

  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display: clamp(3rem, 4vw + 1.5rem, 4.5rem);     /* 48-72 */
  --fs-h1:      clamp(2.25rem, 3vw + 1rem, 3.5rem);    /* 36-56 */
  --fs-h2:      clamp(1.875rem, 1.5vw + 1rem, 2.5rem); /* 30-40 */
  --fs-h3:      clamp(1.375rem, 0.5vw + 1rem, 1.75rem);/* 22-28 */
  --fs-h4:      1.25rem;     /* 20 */
  --fs-body-l:  1.125rem;    /* 18 */
  --fs-body:    1rem;        /* 16 */
  --fs-small:   0.875rem;    /* 14 */
  --fs-xs:      0.75rem;     /* 12 */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-wide:    0.02em;
  --ls-wider:   0.06em;


  /* ─── SPACING SCALE (8pt) ──────────────────────────────── */

  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-11:  160px;

  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);


  /* ─── RADIUS ───────────────────────────────────────────── */

  --r-xs:     6px;
  --r-sm:     10px;
  --r-input:  16px;
  --r-button: 18px;
  --r-card:   24px;
  --r-xl:     32px;
  --r-pill:   9999px;


  /* ─── SHADOWS ──────────────────────────────────────────── */

  --sh-xs:     0 1px 2px rgba(15, 23, 42, .06);
  --sh-sm:     0 4px 12px rgba(15, 23, 42, .06);
  --sh-md:     0 10px 40px rgba(15, 23, 42, .08);
  --sh-lg:     0 20px 60px rgba(15, 23, 42, .10);
  --sh-xl:     0 30px 80px rgba(15, 23, 42, .14);
  --sh-coral:  0 12px 32px rgba(255, 90, 95, .28);
  --sh-purple: 0 12px 32px rgba(123, 97, 255, .28);
  --sh-mint:   0 12px 32px rgba(45, 212, 191, .28);
  --sh-focus:  0 0 0 4px rgba(255, 90, 95, .18);


  /* ─── MOTION ───────────────────────────────────────────── */

  --d-instant:  80ms;
  --d-fast:     150ms;
  --d-base:     220ms;
  --d-slow:     320ms;
  --d-slower:   500ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ─── Z-INDEX SCALE ────────────────────────────────────── */

  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  20;
  --z-overlay: 30;
  --z-modal:   40;
  --z-toast:   50;
  --z-tooltip: 60;


  /* ─── LAYOUT ──────────────────────────────────────────── */

  --container-tight: 760px;
  --container-base:  1120px;
  --container-wide:  1280px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}


/* ─── LEGACY ALIASES (compat magazine.css / conseils.css / blog.css) ── */
/* Les anciens CSS « Fresh Sage » utilisent ces variables : on les remappe
   sur les nouvelles tokens Coral pour préserver leur look. */

:root {
  /* Backgrounds */
  --bg:           var(--bg-cream);
  --surface:      var(--bg-card);
  --surface-2:    var(--bg-light);
  --surface-3:    var(--bg-muted);

  /* Borders */
  --border:       var(--border-soft);
  --border-2:     var(--border-mid);
  --border-3:     var(--border-strong);

  /* Text (compat) */
  --text:         var(--text-1);
  /* --text-2, --text-3 existent déjà */

  /* Accents Fresh Sage → Coral palette */
  --accent:       var(--coral-500);
  --accent-dim:   rgba(255, 90, 95, .10);
  --accent-glow:  rgba(255, 90, 95, .20);
  --accent-dark:  var(--coral-700);
  --accent-soft:  var(--coral-100);

  --green:        var(--mint-600);
  --green-dim:    var(--mint-50);
  --teal:         var(--mint-600);
  --teal-dim:     var(--mint-50);
  --red:          var(--coral-700);
  --red-dim:      var(--coral-50);

  --mustard:      #E8A93C;
  --mustard-soft: #FBEDC8;
  --navy-900:     #0F172A;

  /* Easings (compat) */
  --ease:         var(--ease-inout);
  --spring:       var(--ease-spring);

  /* Shadows (compat) */
  --shadow-xs:    var(--sh-xs);
  --shadow-sm:    var(--sh-sm);
  --shadow-md:    var(--sh-md);
  --shadow-colored: var(--sh-coral);
}


/* ─── REDUCED MOTION ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}