/* ============================================================
   WOUGGO V2 — Design System — variables.css
   Tokens migrés depuis wouggo-design.css (v1)
   Police : Plus Jakarta Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {

  /* ── Couleurs de surface ──────────────────────────────── */
  --color-bg:           #fef4ea;   /* fond page principal */
  --color-surf:         #ffffff;   /* cartes, modales, inputs */
  --color-raised:       #fdf0e0;   /* cartes secondaires */
  --color-deep:         #f7e8d4;   /* sections en retrait */
  --color-light:        #fdf0e0;   /* alias raised (compat v2) */
  --color-cream:        #fef4ea;   /* alias bg */
  --color-white:        #ffffff;
  --color-black:        #000000;

  /* ── Accent (CTA, highlights) ────────────────────────── */
  --color-accent:       #f05e2b;
  --color-accent-dark:  #e04f1e;
  --color-accent-light: rgba(240, 94, 43, .10);

  /* ── Texte ───────────────────────────────────────────── */
  --color-txt:          #532822;         /* texte principal */
  --color-muted:        rgba(83,40,34,.45); /* texte secondaire */
  --color-sub:          rgba(83,40,34,.62); /* texte tertiaire */

  /* Alias v2 compat */
  --color-text-primary:   #532822;
  --color-text-secondary: rgba(83,40,34,.62);
  --color-text-muted:     rgba(83,40,34,.45);
  --color-text-inverse:   #ffffff;
  --color-titre:          #532822;

  /* ── Bordures ────────────────────────────────────────── */
  --color-border:        rgba(83,40,34,.10);
  --color-border-md:     rgba(83,40,34,.18);
  --color-border-focus:  rgba(83,40,34,.35);

  /* ── États ───────────────────────────────────────────── */
  --color-success:        #2E9B63;
  --color-success-light:  rgba(46,155,99,.12);
  --color-success-txt:    #1a7a50;
  --color-verifie:        #2E9B63;
  --color-verifie-light:  rgba(46,155,99,.12);

  --color-info:           #4A90C4;
  --color-info-light:     rgba(74,144,196,.12);

  --color-error:          #C0392B;
  --color-error-light:    rgba(192,57,43,.10);
  --color-danger:         #C0392B;
  --color-danger-light:   rgba(192,57,43,.10);

  --color-warning:        #a0521e;
  --color-warning-light:  #ffd580;

  /* ── Gold (étoiles, ratings, prix) ──────────────────── */
  --color-gold:           #a0521e;
  --color-gold-bg:        #ffd580;
  --color-business:       #a0521e;
  --color-business-light: #ffd580;

  /* ── WhatsApp ────────────────────────────────────────── */
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #1DA851;

  /* ── Niveaux Pro ─────────────────────────────────────── */
  --color-starter:        rgba(83,40,34,.45);

  /* ── Typographie ─────────────────────────────────────── */
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Courier New', monospace;

  /* Tailles — alignées v1 */
  --text-hero:    28px;
  --text-h1:      22px;
  --text-h2:      18px;
  --text-h3:      16px;
  --text-body:    .8rem;
  --text-label:   .8rem;
  --text-caption: .75rem;
  --text-micro:   .7rem;

  /* Alias v1 — un seul système de tailles */
  --text-xs:   var(--text-micro);    /* 11px */
  --text-sm:   var(--text-caption);  /* 12px */
  --text-base: var(--text-body);     /* 16px */
  --text-lg:   var(--text-h2);       /* 18px */
  --text-xl:   var(--text-h1);       /* 22px */
  --text-2xl:  var(--text-hero);     /* 28px */


  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ── Espacements (échelle nombre d'or) ───────────────── */
  --wg-xs:  6px;
  --wg-sm:  10px;
  --wg-md:  16px;
  --wg-lg:  26px;
  --wg-xl:  42px;
  --wg-2xl: 68px;

  /* Alias v2 */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Border radius ───────────────────────────────────── */
  --wg-r-xs:   4px;
  --wg-r-sm:   6px;
  --wg-r-md:   8px;
  --wg-r-lg:   12px;
  --wg-r-xl:   16px;
  --wg-r-pill: 999px;

  /* Alias v2 */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;
  --border-radius-lg: 12px;
  --border-radius-md: 8px;

  /* ── Ombres ──────────────────────────────────────────── */
  --wg-shadow-sm: 0 1px 4px  rgba(83,40,34,.08);
  --wg-shadow-md: 0 2px 12px rgba(83,40,34,.10);
  --wg-shadow-lg: 0 4px 24px rgba(83,40,34,.14);
  --wg-shadow-xl: 0 8px 40px rgba(83,40,34,.18);

  /* Alias v2 */
  --shadow-sm:    0 1px 4px  rgba(83,40,34,.08);
  --shadow-card:  0 2px 12px rgba(83,40,34,.10);
  --shadow-md:    0 4px 24px rgba(83,40,34,.14);
  --shadow-lg:    0 8px 40px rgba(83,40,34,.18);
  --shadow-focus: 0 0 0 3px rgba(240,94,43,.25);

  /* ── Transitions ─────────────────────────────────────── */
  --wg-transition:    0.18s ease;
  --transition-fast:  0.18s ease;
  --transition-base:  0.25s ease;
  --transition-slow:  0.4s ease;

  /* ── Z-index ─────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-top:      500;

  /* ── Layout ──────────────────────────────────────────── */
  --max-width:          1200px;
  --bottom-nav-height:  64px;
  --header-height:      60px;
  --sidebar-width:      60px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  font-size: var(--text-body);
  color: var(--color-txt);
  background-color: var(--color-bg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img   { max-width:100%; height:auto; display:block; }
a     { color:inherit; text-decoration:none; }
button{ cursor:pointer; border:none; background:none; font-family:inherit; }
input, textarea, select { font-family:inherit; font-size:inherit; }
ul, ol { list-style:none; }