/* ==========================================================================
   CAPTAIN FUTURE — L'Encyclopédie Hyperréaliste
   variables.css — Custom properties globales (bible artistique officielle)
   Esthétique : Dune × The Expanse × Foundation × Blade Runner 2049
   ========================================================================== */

:root {
  /* ── 1. FONDS ─────────────────────────────────────────────────────────── */
  --cf-primary-bg: #03050F;              /* Noir espace profond            */
  --cf-secondary-bg: #080C1A;            /* Bleu nuit cosmique             */
  --cf-card-bg: rgba(12, 18, 35, 0.85);  /* Cartes semi-transparentes      */
  --cf-card-bg-solid: #0C1223;
  --cf-surface-raised: rgba(20, 28, 52, 0.72);
  --cf-surface-hover: rgba(28, 38, 68, 0.82);
  --cf-overlay-dark: rgba(3, 5, 15, 0.72);
  --cf-overlay-darker: rgba(3, 5, 15, 0.9);

  /* ── 2. ACCENTS ───────────────────────────────────────────────────────── */
  --cf-gold: #FFB830;                    /* Or cosmique — Captain Future   */
  --cf-gold-light: #FFD77A;
  --cf-gold-deep: #C98A12;
  --cf-orange: #E8621A;                  /* Orange pulp — action           */
  --cf-cyan: #00D4FF;                    /* Cyan holographique             */
  --cf-cyan-soft: rgba(0, 212, 255, 0.55);
  --cf-purple: #7B2FBE;                  /* Violet cosmique                */
  --cf-purple-soft: rgba(123, 47, 190, 0.5);
  --cf-villain-red: #8B0000;             /* Ul Quorn — rouge sombre        */
  --cf-danger: #E23A3A;
  --cf-success: #35C86E;

  /* ── 3. FUTUREMEN (couleurs d'identification) ─────────────────────────── */
  --cf-grag-steel: #8CA0B8;              /* Grag — acier bleuté            */
  --cf-otho-green: #A8D8A8;              /* Otho — vert organique          */
  --cf-simon-red: #FF6B6B;               /* Simon Wright — rouge vital     */
  --cf-joan-blue: #4A7FD4;               /* Joan — bleu Police Planétaire  */

  /* ── 4. TEXTES ────────────────────────────────────────────────────────── */
  --cf-text-primary: #E8EBF2;            /* Blanc cassé                    */
  --cf-text-secondary: #7A8BA0;          /* Gris bleu                      */
  --cf-text-muted: #4A5A70;
  --cf-text-on-gold: #1A1206;

  /* ── 5. BORDURES & LUEURS ─────────────────────────────────────────────── */
  --cf-border-glow: rgba(255, 184, 48, 0.3);
  --cf-border-glow-strong: rgba(255, 184, 48, 0.6);
  --cf-border-subtle: rgba(122, 139, 160, 0.16);
  --cf-border-cyan: rgba(0, 212, 255, 0.3);

  --cf-glow-gold-sm: 0 0 12px rgba(255, 184, 48, 0.25);
  --cf-glow-gold-md: 0 0 24px rgba(255, 184, 48, 0.35);
  --cf-glow-gold-lg: 0 0 48px rgba(255, 184, 48, 0.45);
  --cf-glow-cyan-md: 0 0 24px rgba(0, 212, 255, 0.35);
  --cf-glow-red-md: 0 0 24px rgba(226, 58, 58, 0.35);

  /* ── 6. OMBRES ────────────────────────────────────────────────────────── */
  --cf-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.55);
  --cf-shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.7);
  --cf-shadow-deep: 0 24px 80px rgba(0, 0, 0, 0.8);

  /* ── 7. DÉGRADÉS OFFICIELS ────────────────────────────────────────────── */
  --cf-gradient-gold: linear-gradient(135deg, #FFD77A 0%, #FFB830 45%, #C98A12 100%);
  --cf-gradient-gold-text: linear-gradient(180deg, #FFE9B8 0%, #FFB830 55%, #B87A0E 100%);
  --cf-gradient-hero: radial-gradient(ellipse at center, rgba(3,5,15,0) 0%, rgba(3,5,15,0.85) 78%, #03050F 100%);
  --cf-gradient-space-band: linear-gradient(180deg, #03050F 0%, #080C1A 50%, #03050F 100%);
  --cf-gradient-pulp: linear-gradient(135deg, #E8621A 0%, #FFB830 100%);
  --cf-gradient-holo: linear-gradient(135deg, rgba(0,212,255,0.18) 0%, rgba(123,47,190,0.18) 100%);
  --cf-gradient-villain: linear-gradient(135deg, #8B0000 0%, #2A0404 100%);

  /* ── 8. TYPOGRAPHIE (familles — voir typography.css pour l'échelle) ───── */
  --cf-font-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  --cf-font-heading: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --cf-font-body: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
  --cf-font-mono: 'Share Tech Mono', 'Courier New', monospace;
  --cf-font-pulp: 'Special Elite', 'Courier New', serif;

  /* ── 9. ESPACEMENTS (échelle 4px) ─────────────────────────────────────── */
  --cf-space-1: 0.25rem;
  --cf-space-2: 0.5rem;
  --cf-space-3: 0.75rem;
  --cf-space-4: 1rem;
  --cf-space-5: 1.5rem;
  --cf-space-6: 2rem;
  --cf-space-7: 3rem;
  --cf-space-8: 4rem;
  --cf-space-9: 6rem;

  /* ── 10. RADII & GÉOMÉTRIE ────────────────────────────────────────────── */
  --cf-radius-sm: 4px;
  --cf-radius-md: 8px;
  --cf-radius-lg: 14px;
  /* Coins angulaires HUD SF (clip-path officiel des cartes) */
  --cf-clip-card: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  --cf-clip-btn: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));

  /* ── 11. TRANSITIONS & EASINGS ────────────────────────────────────────── */
  --cf-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --cf-ease-warp: cubic-bezier(0.85, 0, 0.15, 1);
  --cf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cf-duration-fast: 180ms;
  --cf-duration-base: 320ms;
  --cf-duration-slow: 600ms;
  --cf-duration-warp: 600ms;

  /* ── 12. Z-INDEX (échelle ordonnée) ───────────────────────────────────── */
  --cf-z-starfield: 0;
  --cf-z-scanlines: 1;
  --cf-z-content: 10;
  --cf-z-nav: 100;
  --cf-z-lightbox: 500;
  --cf-z-preloader: 1000;
  --cf-z-warp: 1100;

  /* ── 13. LAYOUT ───────────────────────────────────────────────────────── */
  --cf-nav-width: 248px;
  --cf-nav-width-collapsed: 72px;
  --cf-container-max: 1320px;
  --cf-header-height: 72px;
}

/* Breakpoints officiels (les custom properties ne sont pas utilisables
   dans les media queries — valeurs documentées ici pour cohérence) :
   --cf-bp-mobile  : 0     → 639px
   --cf-bp-tablet  : 640px → 1023px
   --cf-bp-desktop : 1024px → 1439px
   --cf-bp-wide    : 1440px+
*/