/* ===================================================================
   Editorial Signal × The Black Room
   Tokens de design — palette, typographie, espacements, animations.

   Source de vérité : https://theblackroom.io/ressources/DESIGN_SYSTEM.md
   =================================================================== */

:root {
  /* ── Couleurs principales ── */
  --primary-color: #F50000;
  --primary-hover: #CC0000;

  /* ── Statuts / accents néon ── */
  --success-color:  #00FF00;
  --warning-color:  #FFAA00;
  --info-color:     #00FFFF;
  --danger-color:   #F50000;
  --accent-magenta: #FF00FF;

  /* ── Backgrounds (sombre → moins sombre) ── */
  --bg-color:    #000000;
  --card-bg:     #0A0A0A;
  --summary-bg:  #0D0D0D;
  --header-bg:   #111111;

  /* ── Textes ── */
  --text-primary:   #FFFFFF;
  --text-secondary: #999999;
  --text-tertiary:  #666666;

  /* ── Bordures ── */
  --border-color:  #222222;
  --border-hover:  #333333;
  --border-strong: #444444;

  /* ── Ombres ── */
  --shadow:    0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
  --glow-primary:        0 0 20px rgba(245, 0, 0, 0.3);
  --glow-primary-strong: 0 0 30px rgba(245, 0, 0, 0.5);

  /* ── Grille de fond ── */
  --grid-color: rgba(255, 255, 255, 0.05);

  /* ── Aliases legacy pour ne pas casser les classes JS ── */
  --bg-1:        var(--bg-color);
  --surface-1:   var(--card-bg);
  --surface-2:   var(--summary-bg);
  --surface-3:   var(--header-bg);
  --surface-4:   #1A1A1A;
  --border:      var(--border-color);
  --accent:      var(--primary-color);
  --accent-soft: rgba(245, 0, 0, 0.15);
  --accent-tint: rgba(245, 0, 0, 0.08);
  --success:     var(--success-color);
  --success-tint: rgba(0, 255, 0, 0.10);
  --warning:     var(--warning-color);
  --warning-tint: rgba(255, 170, 0, 0.10);
  --danger:      var(--danger-color);
  --danger-tint: rgba(245, 0, 0, 0.10);
  --text-1: var(--text-primary);
  --text-2: #BFBFBF;
  --text-3: var(--text-secondary);
  --text-4: var(--text-tertiary);
  --text-5: #444;
  --border-glow: rgba(245, 0, 0, 0.4);

  /* ── Typographie ── */
  --font-display: "Funnel Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "DM Sans", ui-monospace, "SF Mono", Menlo, monospace;
  /* Aliases legacy */
  --font-serif: var(--font-display);
  --font-sans:  var(--font-body);

  /* Hiérarchie typographique TBR */
  --fs-h1: 3.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-tab: 1.1rem;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* Aliases legacy (fluid scale, conservés pour transition) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3rem;
  --text-display: 3.5rem;

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

  --tracking-tight: 0;
  --tracking-snug: 0;
  --tracking-wide: 1px;
  --tracking-mega: 1px;

  /* ── Espacement (multiples de 5px) ── */
  --space-xs:  5px;
  --space-sm:  10px;
  --space-md:  15px;
  --space-lg:  20px;
  --space-xl:  25px;
  --space-2xl: 30px;
  --space-3xl: 40px;
  --space-4xl: 60px;
  /* Aliases legacy */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 25px;
  --space-6: 30px;
  --space-7: 40px;
  --space-8: 60px;
  --space-9: 80px;
  --space-10: 100px;

  /* ── Radius (sharp edges partout) ── */
  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-pill: 0;

  /* ── Durées + easings ── */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   ease;

  /* ── Layout ── */
  --shell-header-h: 80px;
  --content-max: 1200px;
  --content-pad-x: 20px;

  /* Aliases shadow legacy */
  --shadow-1: var(--shadow);
  --shadow-2: var(--shadow-lg);
  --shadow-glow: var(--glow-primary);
}