/* ============================================================
 *  Peerly — Design tokens
 *  v8.1.0 — radius plus généreux, plus de max-width
 * ============================================================ */

:root {
  /* ------------------------------------------------------------
   *  Typographie
   * ------------------------------------------------------------ */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --text-2xs: 10px;   --leading-2xs: 14px;
  --text-xs: 11px;    --leading-xs: 16px;
  --text-sm: 12px;    --leading-sm: 18px;
  --text-base: 13px;  --leading-base: 20px;
  --text-md: 14px;    --leading-md: 22px;
  --text-lg: 16px;    --leading-lg: 24px;
  --text-xl: 18px;    --leading-xl: 26px;
  --text-2xl: 22px;   --leading-2xl: 30px;
  --text-3xl: 28px;   --leading-3xl: 36px;
  --text-4xl: 36px;   --leading-4xl: 44px;

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

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

  /* ------------------------------------------------------------
   *  Espacement
   * ------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ------------------------------------------------------------
   *  Formes — Radius généreux mais pas pill
   * ------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 26px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------
   *  Mouvement
   * ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;

  /* ------------------------------------------------------------
   *  Layout
   * ------------------------------------------------------------ */
  --sidebar-width: 268px;
  --header-height: 56px;

  /* ------------------------------------------------------------
   *  Mapping sémantique
   * ------------------------------------------------------------ */
  --md-primary:                  var(--p-primary);
  --md-on-primary:               var(--p-on-primary);
  --md-primary-container:        var(--p-primary-container);
  --md-on-primary-container:     var(--p-on-primary-container);
  --md-primary-soft:             var(--p-primary-soft);

  --md-secondary:                var(--p-secondary);
  --md-on-secondary:             var(--p-on-secondary);
  --md-secondary-container:      var(--p-secondary-container);
  --md-on-secondary-container:   var(--p-on-secondary-container);

  --md-error:                    #F87171;
  --md-error-soft:               rgba(248, 113, 113, 0.12);
  --md-success:                  #4ADE80;
  --md-success-soft:             rgba(74, 222, 128, 0.12);
  --md-warning:                  #FBBF24;

  --md-surface:                  var(--m-surface);
  --md-on-surface:               var(--m-on-surface);
  --md-surface-variant:          var(--m-surface-variant);
  --md-on-surface-variant:       var(--m-on-surface-variant);
  --md-surface-container-lowest: var(--m-surface-container-lowest);
  --md-surface-container-low:    var(--m-surface-container-low);
  --md-surface-container:        var(--m-surface-container);
  --md-surface-container-high:   var(--m-surface-container-high);
  --md-surface-container-highest:var(--m-surface-container-highest);

  --md-outline:                  var(--m-outline);
  --md-outline-variant:          var(--m-outline-variant);

  /* ------------------------------------------------------------
   *  Aliases de compatibilité
   * ------------------------------------------------------------ */
  --bg-primary:        var(--md-surface);
  --bg-secondary:      var(--md-surface-container-low);
  --bg-tertiary:       var(--md-surface-container);
  --bg-elevated:       var(--md-surface-container-high);
  --bg-glass:          color-mix(in srgb, var(--md-surface-container-low) 88%, transparent);

  --accent:            var(--md-primary);
  --accent-hover:      var(--md-primary-container);
  --accent-glow:       var(--md-primary-soft);
  --accent-subtle:     var(--md-primary-soft);

  --text-primary:      var(--md-on-surface);
  --text-secondary:    var(--md-on-surface-variant);
  --text-muted:        var(--md-outline);

  --success:           var(--md-success);
  --danger:            var(--md-error);
  --warning:           var(--md-warning);
  --info:              var(--md-primary);

  --border:            var(--md-outline-variant);
  --border-focus:      var(--md-primary);

  --radius-full-lg:    var(--radius-lg);
  --radius-full-md:    var(--radius-md);
  --radius-full-sm:    var(--radius-sm);

  --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:         0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:         0 12px 32px rgba(0, 0, 0, 0.16);
  --shadow-glow:       0 0 0 3px var(--md-primary-soft);

  --transition-fast:   var(--duration-fast) var(--ease-out);
  --transition-base:   var(--duration-base) var(--ease-out);
  --transition-slow:   var(--duration-slow) var(--ease-out);
}