/* ============================================================
   i-dive Experience — Design Tokens
   Phase 1 : esthétique sobre (inspiration EcoFlow)
   À confier à un designer pour la phase identité visuelle
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COULEURS
     ---------------------------------------------------------- */

  /* Fonds — gris anthracite, pas noir abyssal */
  --color-bg-900: #111318;   /* fond principal */
  --color-bg-800: #1a1d24;   /* fond cartes */
  --color-bg-700: #22262f;   /* fond inputs, zones secondaires */
  --color-bg-600: #2c313c;   /* bordures, séparateurs */

  /* Accent principal — cyan désaturé, retenu */
  --color-accent-400: #2dd4bf;   /* CTA, éléments actifs */
  --color-accent-300: #5eead4;   /* hover */
  --color-accent-200: #99f6e4;   /* focus rings, highlights légers */

  /* Accent secondaire — pour différencier mobile/desktop si besoin */
  --color-accent-alt-400: #38bdf8;
  --color-accent-alt-300: #7dd3fc;

  /* Sémantique */
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger:  #f87171;
  --color-xp:      #f97316;   /* progression, gamification */

  /* Texte */
  --color-text-primary:   #f1f5f9;   /* texte principal */
  --color-text-secondary: #94a3b8;   /* labels, texte secondaire */
  --color-text-muted:     #475569;   /* désactivé, placeholders */

  /* ----------------------------------------------------------
     TYPOGRAPHIE
     ---------------------------------------------------------- */

  /* Familles — à définir avec le designer */
  --font-display: sans-serif;   /* titres, chiffres clés */
  --font-body:    sans-serif;   /* corps de texte, UI */
  --font-mono:    monospace;    /* données techniques : profondeur, durée, pression */

  /* Échelle */
  --font-size-xs:  0.75rem;    /* 12px */
  --font-size-sm:  0.875rem;   /* 14px */
  --font-size-md:  1rem;       /* 16px */
  --font-size-lg:  1.25rem;    /* 20px */
  --font-size-xl:  1.5rem;     /* 24px */
  --font-size-2xl: 2rem;       /* 32px */
  --font-size-3xl: 3rem;       /* 48px — profondeur, XP, chiffres clés */

  /* Graisse */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Interlignage */
  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* ----------------------------------------------------------
     ESPACEMENT
     ---------------------------------------------------------- */

  --space-base: 0.5rem;   /* 8px */

  --space-1:  calc(var(--space-base) * 0.5);   /*  4px */
  --space-2:  var(--space-base);               /*  8px */
  --space-3:  calc(var(--space-base) * 1.5);   /* 12px */
  --space-4:  calc(var(--space-base) * 2);     /* 16px */
  --space-6:  calc(var(--space-base) * 3);     /* 24px */
  --space-8:  calc(var(--space-base) * 4);     /* 32px */
  --space-12: calc(var(--space-base) * 6);     /* 48px */
  --space-16: calc(var(--space-base) * 8);     /* 64px */

  /* ----------------------------------------------------------
     BORDURES
     ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --border-width-thin:   1px;
  --border-width-medium: 2px;

  --border-color-default: var(--color-bg-600);
  --border-color-accent:  var(--color-accent-400);

  /* ----------------------------------------------------------
     OMBRES
     Sobres — pas de lueurs bioluminescentes à ce stade
     ---------------------------------------------------------- */

  --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 32px rgba(0, 0, 0, 0.5);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-top:     400;

}