/* ============================================================
   02-tokens.css — Variables CSS (Design Tokens)
   ============================================================ */

:root {
  /* === COULEURS DE FOND === */
  --bg-base:        #0A0E1A;
  --bg-surface:     #0F1420;
  --bg-elevated:    #151B2E;
  --bg-glass:       rgba(21, 27, 46, 0.55);
  --bg-glass-strong: rgba(21, 27, 46, 0.85);

  /* === TEXTE === */
  --text-primary:   #FAFBFC;
  --text-secondary: #A8B0C3;
  --text-tertiary:  #5C6582;
  --text-muted:     #3A4258;

  /* === ACCENTS === */
  --accent-go:      #10F59F;       /* Vert vibrant - energie OK */
  --accent-go-glow: rgba(16, 245, 159, 0.18);
  
  --accent-danger:  #FF5E5E;       /* Rouge corail - coupure active */
  --accent-danger-glow: rgba(255, 94, 94, 0.20);
  
  --accent-warning: #FFB020;       /* Ambre - a venir / variable */
  --accent-warning-glow: rgba(255, 176, 32, 0.18);
  
  --accent-premium: #7C5CFF;       /* Violet - insights exclusifs */
  --accent-premium-glow: rgba(124, 92, 255, 0.22);

  /* === BORDURES === */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);

  /* === OMBRES === */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md:      0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg:      0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-glow-go: 0 0 40px var(--accent-go-glow);
  --shadow-glow-danger: 0 0 40px var(--accent-danger-glow);
  --shadow-glow-premium: 0 0 50px var(--accent-premium-glow);

  /* === ESPACEMENTS === */
  --space-3xs: 4px;
  --space-2xs: 6px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* === RAYONS === */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* === TIMINGS ANIMATIONS === */
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 100ms;
  --duration-quick:   200ms;
  --duration-base:    300ms;
  --duration-slow:    500ms;

  /* === Z-INDEX === */
  --z-base:    1;
  --z-sticky:  50;
  --z-modal:   100;
  --z-fab:     90;
  --z-toast:   200;

  /* === TYPOGRAPHIE — TAILLES === */
  --font-size-2xs: 10px;
  --font-size-xs:  11px;
  --font-size-sm:  13px;
  --font-size-md:  15px;
  --font-size-lg:  17px;
  --font-size-xl:  20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 44px;
  --font-size-5xl: 56px;
  --font-size-6xl: 72px;

  /* === TYPOGRAPHIE — POIDS === */
  --font-weight-thin: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* === LAYOUT === */
  --content-max-width: 680px;
  --header-height: 60px;
  --bottom-nav-height: 70px;
}