/* ============================================================
   SOCIALBROZ.CO — DESIGN TOKENS v1.0
   Direction B "Vivante & Engageante" (Loveart)
   Format : CSS variables, prêtes pour Tailwind config
   Mode clair par défaut — mode sombre via [data-theme="dark"]
   ============================================================ */

:root {
  /* ---------- COLOR · PRIMARY (Coral) ---------- */
  --color-primary-50:  #FFF1F0;
  --color-primary-100: #FFE0DE;
  --color-primary-200: #FFC7C4;
  --color-primary-300: #FFA8A4;
  --color-primary-400: #FF8A86;
  --color-primary-500: #FF6B6B;  /* base — CTA, highlights */
  --color-primary-600: #F04E4E;  /* hover */
  --color-primary-700: #D63A3F;  /* active */
  --color-primary-800: #B22B33;
  --color-primary-900: #8E2129;

  /* ---------- COLOR · SECONDARY (Teal) ---------- */
  --color-secondary-50:  #EFFCFA;
  --color-secondary-100: #D5F6F2;
  --color-secondary-200: #ACEDE6;
  --color-secondary-300: #7FE0D6;
  --color-secondary-400: #62D6CC;
  --color-secondary-500: #4ECDC4;  /* base — accents secondaires */
  --color-secondary-600: #2FB3AA;
  --color-secondary-700: #1F9189;  /* texte sur fond clair (AA) */
  --color-secondary-800: #17726C;
  --color-secondary-900: #115A55;

  /* ---------- COLOR · ACCENT (Purple) ---------- */
  --color-accent-100: #EBDDF2;
  --color-accent-500: #9B59B6;
  --color-accent-700: #76448A;

  /* ---------- COLOR · SEMANTIC ---------- */
  --color-success-100: #E3F6ED;
  --color-success-500: #1F9D61;
  --color-success-700: #157247;

  --color-warning-100: #FEF4D8;
  --color-warning-500: #FBBF24;
  --color-warning-700: #92400E;

  --color-error-100: #FDE8E8;
  --color-error-500: #DC2F2F;
  --color-error-700: #A82222;

  --color-info-100: #E7F0FD;
  --color-info-500: #2F80ED;
  --color-info-700: #1B5CB8;

  /* ---------- COLOR · NEUTRALS (5 nuances) ---------- */
  --color-neutral-100: #F1F5F9;
  --color-neutral-300: #CBD5E1;
  --color-neutral-500: #64748B;
  --color-neutral-700: #334155;
  --color-neutral-900: #2D3436;

  /* ---------- COLOR · SURFACES & TEXT (aliases sémantiques) ---------- */
  --color-bg:               #FEF9F6;  /* cream — fond de page */
  --color-surface:          #FFFFFF;  /* cartes, panneaux */
  --color-surface-elevated: #FFFFFF;
  --color-surface-tint:     #FFF3EE;  /* aplats chauds (sections alternées) */
  --color-text:             #2D3436;
  --color-text-secondary:   #5A6670;
  --color-text-disabled:    #9AA5AE;
  --color-text-inverse:     #FFFFFF;
  --color-border:           #E8E2DD;
  --color-border-strong:    #CBD5E1;
  --color-border-subtle:    #F1ECE7;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Échelle desktop (mobile via media query dans base.css) */
  --text-h1: 3.5rem;      /* 56px · lh 1.1  · Poppins 700 */
  --text-h2: 2.5rem;      /* 40px · lh 1.15 · Poppins 700 */
  --text-h3: 1.75rem;     /* 28px · lh 1.25 · Poppins 600 */
  --text-h4: 1.375rem;    /* 22px · lh 1.3  · Poppins 600 */
  --text-h5: 1.125rem;    /* 18px · lh 1.4  · Poppins 600 */
  --text-h6: 1rem;        /* 16px · lh 1.4  · Poppins 600 */
  --text-body-lg: 1.125rem; /* 18px · lh 1.6 · Inter 400 */
  --text-body: 1rem;        /* 16px · lh 1.6 · Inter 400 */
  --text-body-sm: 0.875rem; /* 14px · lh 1.5 · Inter 400 */
  --text-caption: 0.78rem;  /* 12.5px · lh 1.45 · Inter 400/500 */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* ---------- SPACING (échelle 4/8/12/16/24/32/48/64) ---------- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-section: clamp(3rem, 8vw, 6rem); /* padding vertical sections */

  /* ---------- RADIUS ---------- */
  --radius-sm: 8px;     /* boutons, inputs, badges carrés */
  --radius-md: 12px;    /* cartes */
  --radius-lg: 16px;    /* cartes larges, modals */
  --radius-xl: 24px;    /* hero panels */
  --radius-full: 999px; /* pills, avatars */

  /* ---------- SHADOWS (chaudes, douces) ---------- */
  --shadow-sm: 0 1px 3px rgba(45, 52, 54, 0.07);
  --shadow-md: 0 4px 16px rgba(45, 52, 54, 0.08);
  --shadow-lg: 0 12px 32px rgba(45, 52, 54, 0.12);
  --shadow-focus: 0 0 0 3px rgba(255, 107, 107, 0.25);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;

  /* ---------- BREAKPOINTS (référence — utilisés en media queries) ----------
     --bp-mobile:  360px
     --bp-tablet:  768px
     --bp-laptop:  1024px
     --bp-desktop: 1440px
  ------------------------------------------------------------------------ */
}

/* ============================================================
   MODE SOMBRE (optionnel) — [data-theme="dark"]
   ============================================================ */
[data-theme="dark"] {
  --color-bg:               #131A22;
  --color-surface:          #1C2530;
  --color-surface-elevated: #232E3B;
  --color-surface-tint:     #20262E;
  --color-text:             #F2F4F6;
  --color-text-secondary:   #A8B3BD;
  --color-text-disabled:    #5F6B76;
  --color-text-inverse:     #2D3436;
  --color-border:           #2C3743;
  --color-border-strong:    #3D4A58;
  --color-border-subtle:    #222C37;

  --color-primary-500: #FF7E7E;
  --color-primary-600: #FF6B6B;
  --color-primary-700: #F04E4E;
  --color-primary-50:  #2C2026;
  --color-primary-100: #3A262B;

  --color-secondary-100: #15302E;
  --color-success-100: #15302394;
  --color-warning-100: #33290F;
  --color-error-100: #361B1B;
  --color-info-100: #16263B;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}