/* ==========================================================================
   LE MUSCLÉ DU WEB — Design Tokens
   Version 2.0 — Dark Premium Hybrid
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     COULEURS — Backgrounds
     Mode hybride : hero/nav sombres, sections alternées pour le rythme
     ----------------------------------------------------------------------- */
  --color-bg-darkest:       #0F1119;   /* Header, footer, hero, sections sombres */
  --color-bg-dark:          #161B2E;   /* Sections alternées */
  --color-bg-card:          #1A1D2E;   /* Cards sur fond darkest */
  --color-bg-card-alt:      #1E2338;   /* Cards sur fond dark */
  --color-bg-elevated:      #242840;   /* Inputs, badges bg, éléments surélevés */
  --color-bg-overlay:       rgba(15, 17, 25, 0.85); /* Overlays, modals */

  /* -----------------------------------------------------------------------
     COULEURS — Accent (orange signature)
     ----------------------------------------------------------------------- */
  --color-accent:           #FF8A00;
  --color-accent-hover:     #E67A00;
  --color-accent-light:     #FFB347;
  --color-accent-subtle:    rgba(255, 138, 0, 0.12);
  --color-accent-glow:      rgba(255, 138, 0, 0.15);

  /* -----------------------------------------------------------------------
     COULEURS — Texte
     ----------------------------------------------------------------------- */
  --color-text-primary:     #F0F0F5;   /* Titres, texte principal */
  --color-text-secondary:   #A0A3B5;   /* Descriptions, sous-titres */
  --color-text-muted:       #6B6F85;   /* Labels, méta, placeholders */
  --color-text-inverse:     #0F1119;   /* Texte sur fond accent */
  --color-text-accent:      #FF8A00;   /* Liens, highlights */

  /* -----------------------------------------------------------------------
     COULEURS — Bordures
     ----------------------------------------------------------------------- */
  --color-border:           rgba(255, 255, 255, 0.06);
  --color-border-hover:     rgba(255, 255, 255, 0.12);
  --color-border-accent:    rgba(255, 138, 0, 0.3);
  --color-border-accent-hover: rgba(255, 138, 0, 0.5);

  /* -----------------------------------------------------------------------
     COULEURS — Sémantiques
     ----------------------------------------------------------------------- */
  --color-success:          #34D399;
  --color-success-subtle:   rgba(52, 211, 153, 0.12);
  --color-warning:          #FBBF24;
  --color-error:            #F87171;
  --color-navy:             #333652;   /* Héritage logo/marque */

  /* -----------------------------------------------------------------------
     TYPOGRAPHIE
     ----------------------------------------------------------------------- */
  --font-heading:           'Poppins', sans-serif;
  --font-body:              'Inter', sans-serif;
  --font-mono:              'JetBrains Mono', monospace;

  /* Tailles */
  --text-xs:                0.75rem;    /* 12px */
  --text-sm:                0.875rem;   /* 14px */
  --text-base:              1rem;       /* 16px */
  --text-lg:                1.125rem;   /* 18px */
  --text-xl:                1.25rem;    /* 20px */
  --text-2xl:               1.5rem;     /* 24px */
  --text-3xl:               1.875rem;   /* 30px */
  --text-4xl:               2.25rem;    /* 36px */
  --text-5xl:               3rem;       /* 48px */
  --text-hero:              clamp(2.5rem, 5vw, 4rem);

  /* Graisse */
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  /* Hauteur de ligne */
  --line-height-tight:      1.2;
  --line-height-snug:       1.35;
  --line-height-normal:     1.5;
  --line-height-relaxed:    1.7;

  /* Espacement lettres */
  --letter-spacing-tight:   -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.1em;

  /* -----------------------------------------------------------------------
     ESPACEMENTS
     ----------------------------------------------------------------------- */
  --space-0:                0;
  --space-1:                0.25rem;    /* 4px */
  --space-2:                0.5rem;     /* 8px */
  --space-3:                0.75rem;    /* 12px */
  --space-4:                1rem;       /* 16px */
  --space-5:                1.25rem;    /* 20px */
  --space-6:                1.5rem;     /* 24px */
  --space-7:                1.75rem;    /* 28px */
  --space-8:                2rem;       /* 32px */
  --space-10:               2.5rem;     /* 40px */
  --space-12:               3rem;       /* 48px */
  --space-16:               4rem;       /* 64px */
  --space-20:               5rem;       /* 80px */
  --space-24:               6rem;       /* 96px */
  --space-32:               8rem;       /* 128px */

  --section-py:             clamp(3rem, 8vw, 6rem);
  --section-px:             clamp(1rem, 4vw, 2rem);

  /* -----------------------------------------------------------------------
     BORDER RADIUS
     ----------------------------------------------------------------------- */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              12px;
  --radius-xl:              16px;
  --radius-2xl:             24px;
  --radius-full:            9999px;

  /* -----------------------------------------------------------------------
     OMBRES
     ----------------------------------------------------------------------- */
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:              0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl:              0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-accent:          0 4px 20px rgba(255, 138, 0, 0.2);
  --shadow-accent-lg:       0 8px 40px rgba(255, 138, 0, 0.25);
  --shadow-card:            0 2px 8px rgba(0, 0, 0, 0.3),
                            inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-card-hover:      0 8px 24px rgba(0, 0, 0, 0.4),
                            inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --max-width:              1200px;
  --max-width-narrow:       800px;
  --max-width-wide:         1400px;

  /* -----------------------------------------------------------------------
     TRANSITIONS
     ----------------------------------------------------------------------- */
  --transition-fast:        150ms ease;
  --transition-normal:      250ms ease;
  --transition-slow:        400ms ease;
  --transition-bounce:      400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -----------------------------------------------------------------------
     Z-INDEX
     ----------------------------------------------------------------------- */
  --z-behind:              -1;
  --z-base:                 0;
  --z-dropdown:             10;
  --z-sticky:               20;
  --z-header:               100;
  --z-overlay:              200;
  --z-modal:                300;
}