/* ===== DIGITAME DESIGN SYSTEM - CONFIGURATION ===== */
/* 
   🎨 Configuration centralisée pour faciliter les modifications
   ✨ Conserve le schéma de couleur parfait actuel
   🔧 Placeholders temporaires pour les Digitames (sprites à venir)
*/

:root {
  /* ===== COULEURS PRINCIPALES ===== */
  --primary-gradient: linear-gradient(135deg, #00d4ff, #9c40ff);
  --primary-cyan: #00d4ff;
  --primary-purple: #9c40ff;
  
  /* ===== COULEURS DE FOND ===== */
  --bg-dark: #0a0b0d;
  --bg-darker: #000000;
  --bg-section-1: #1a1d29;
  --bg-section-2: #151821;
  --bg-section-3: #0f1419;
  
  /* ===== COULEURS DE TEXTE ===== */
  --text-primary: #ffffff;
  --text-secondary: #e0e6ed;
  --text-muted: #b4bcd0;
  --text-accent: var(--primary-cyan);
  
  /* ===== COULEURS DES TYPES DIGITAMES ===== */
  --type-bioflorae: #51cf66;
  --type-bioflorae-light: #69db7c;
  --type-bioflorae-alpha: rgba(81, 207, 102, 0.5);
  --type-bioflorae-bg: rgba(81, 207, 102, 0.3);
  
  --type-pyrofae: #ff6b6b;
  --type-pyrofae-light: #ff8787;
  --type-pyrofae-alpha: rgba(255, 107, 107, 0.5);
  --type-pyrofae-bg: rgba(255, 107, 107, 0.3);
  
  --type-aquaflow: #74c0fc;
  --type-aquaflow-light: #91d5ff;
  --type-aquaflow-alpha: rgba(116, 192, 252, 0.5);
  --type-aquaflow-bg: rgba(116, 192, 252, 0.3);
  
  --type-voltage: #ffd43b;
  --type-voltage-light: #ffe066;
  --type-voltage-alpha: rgba(255, 212, 59, 0.5);
  --type-voltage-bg: rgba(255, 212, 59, 0.3);
  
  --type-fermetal: #868e96;
  --type-fermetal-light: #adb5bd;
  --type-fermetal-alpha: rgba(134, 142, 150, 0.5);
  --type-fermetal-bg: rgba(134, 142, 150, 0.3);
  
  --type-terragear: #8b4513;
  --type-terragear-light: #a0522d;
  --type-terragear-alpha: rgba(139, 69, 19, 0.5);
  --type-terragear-bg: rgba(139, 69, 19, 0.3);
  
  --type-digital: #4c6ef5;
  --type-digital-light: #6b7aff;
  --type-digital-alpha: rgba(76, 110, 245, 0.5);
  --type-digital-bg: rgba(76, 110, 245, 0.3);
  
  --type-cyber: #9c36b5;
  --type-cyber-light: #be4bdb;
  --type-cyber-alpha: rgba(156, 54, 181, 0.5);
  --type-cyber-bg: rgba(156, 54, 181, 0.3);
  
  /* ===== TRANSPARENCES ET EFFETS ===== */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-hover: rgba(0, 212, 255, 0.3);
  --glass-border-strong: rgba(0, 212, 255, 0.5);
  
  /* ===== OMBRES ET LUEURS ===== */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-strong: 0 20px 40px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 10px 30px rgba(0, 212, 255, 0.3);
  --shadow-glow-hover: 0 15px 40px rgba(0, 212, 255, 0.4);
  
  /* ===== TYPOGRAPHIE ===== */
  --font-primary: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --font-size-hero: clamp(2.5rem, 6vw, 4rem);
  --font-size-section: clamp(2rem, 5vw, 3rem);
  --font-size-card: 1.5rem;
  --font-size-body: 1rem;
  --font-size-small: 0.9rem;
  --font-size-tiny: 0.8rem;
  
  /* ===== ESPACEMENTS ===== */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  
  /* ===== RAYONS DE BORDURE ===== */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-pill: 50px;
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ===== BREAKPOINTS (pour référence) ===== */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1200px;
  
  /* ===== EFFETS SPÉCIAUX ===== */
  --blur-light: blur(10px);
  --blur-strong: blur(20px);
  
  /* ===== GRADIENTS SPÉCIAUX ===== */
  --gradient-hero: radial-gradient(circle at 30% 20%, rgba(156, 64, 255, 0.3) 0%, transparent 50%),
                   radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.3) 0%, transparent 50%),
                   linear-gradient(135deg, #0a0b0d 0%, #1a1d29 100%);
                   
  --gradient-section-1: linear-gradient(180deg, #0a0b0d 0%, #1a1d29 100%);
  --gradient-section-2: linear-gradient(180deg, #1a1d29 0%, #0f1419 100%);
  --gradient-section-3: linear-gradient(180deg, #0f1419 0%, #0a0b0d 100%);
  --gradient-footer: linear-gradient(180deg, #0a0b0d 0%, #000000 100%);
  
  /* ===== CONFIGURATION DIGITAMES (PLACEHOLDERS) ===== */
  /*
    🔄 NOTES IMPORTANTES:
    - Les émojis actuels sont des placeholders temporaires
    - Les vrais sprites Digitame seront intégrés plus tard
    - Les noms et descriptions sont basés sur les vrais types de la DB
    - Conserver cette structure pour la transition vers les sprites
  */
  --digitame-placeholder-size: 4rem;
  --digitame-icon-size: 2rem;
  --digitame-orb-size: 80px;
  
  /* ===== DOMAINE ET API ===== */
  /*
    🌐 Configuration pour digitame.fr
    🔗 Le domaine officiel remplace l'IP temporaire
  */
  --domain: 'digitame.fr';
  --api-port: '5007';
  
  /* ===== Z-INDEX HIERARCHY ===== */
  --z-header: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
  --z-background: -1;
}