@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

/* ==========================================================================
   NovaHeberg — DESIGN TOKENS
   Palette Triadique : Violet Néon, Bleu Électrique et Rouge Vif.
   
   Identité visuelle moderne, dynamique et percutante pour hébergement cloud.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------
     1. GROUND & SURFACES
     Teinte subtilement infusée de violet/bleu pour une profondeur premium
     --------------------------------------------------------------- */
  --sg-bg:        #F8FAFE;
  --sg-surface:   #FFFFFF;
  --sg-surface-2: #F1F4FA;
  --sg-surface-3: #E6ECF6;
  --sg-surface-dark: #0D111D;
  --sg-surface-dark-2: #161D2F;

  --sg-line:      #E2E8F0;
  --sg-line-soft: #F1F5F9;
  --sg-line-firm: #CBD5E1;

  --sg-heading:  #0F172A;
  --sg-text:     #475569;
  --sg-text-dim: #94A3B8;
  --sg-on-color: #FFFFFF;

  /* ---------------------------------------------------------------
     2. BRAND PALETTE : VIOLET • BLEU • ROUGE
     --------------------------------------------------------------- */

  /* VIOLET — créativité, innovation, cloud moderne */
  --sg-violet:       #8B5CF6;
  --sg-violet-hover: #7C3AED;
  --sg-violet-press: #6D28D9;
  --sg-violet-soft:  #F5F3FF;
  --sg-violet-line:  #DDD6FE;
  --sg-violet-ink:   #6D28D9;
  --sg-violet-glow:  rgba(139, 92, 246, 0.35);

  /* BLEU — technologie, confiance, infrastructure */
  --sg-blue:       #2563EB;
  --sg-blue-hover: #1D4ED8;
  --sg-blue-press: #1E40AF;
  --sg-blue-soft:  #EFF6FF;
  --sg-blue-line:  #BFDBFE;
  --sg-blue-ink:   #1D4ED8;
  --sg-blue-glow:  rgba(37, 99, 235, 0.32);

  /* ROUGE — puissance, performance, alerte, gaming */
  --sg-red:        #EF4444;
  --sg-red-vibrant:#F43F5E;
  --sg-red-hover:  #E11D48;
  --sg-red-press:  #BE123C;
  --sg-red-soft:   #FFF1F2;
  --sg-red-line:   #FECDD3;
  --sg-red-ink:    #BE123C;
  --sg-red-glow:   rgba(239, 68, 68, 0.30);

  /* AMBER — avertissements */
  --sg-amber:      #D97706;
  --sg-amber-hover:#B45309;
  --sg-amber-press:#92400E;
  --sg-amber-soft: #FFFBEB;
  --sg-amber-line: #FDE68A;
  --sg-amber-ink:  #92400E;

  /* GREEN — succès, disponibilité, en ligne */
  --sg-green:      #10B981;
  --sg-green-hover:#059669;
  --sg-green-soft: #ECFDF5;
  --sg-green-line: #A7F3D0;
  --sg-green-ink:  #065F46;

  /* ---------------------------------------------------------------
     3. GRADIENTS SIGNATURE (Violet -> Bleu -> Rouge)
     --------------------------------------------------------------- */
  --sg-signature:        linear-gradient(135deg, #8B5CF6 0%, #2563EB 50%, #EF4444 100%);
  --sg-signature-h:      linear-gradient(90deg, #8B5CF6 0%, #3B82F6 50%, #EF4444 100%);
  --sg-signature-hover:  linear-gradient(135deg, #7C3AED 0%, #1D4ED8 50%, #DC2626 100%);
  --sg-signature-subtle: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(37, 99, 235, 0.06) 50%, rgba(239, 68, 68, 0.08) 100%);
  --sg-gradient-v-b:     linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%);
  --sg-gradient-b-r:     linear-gradient(135deg, #2563EB 0%, #EF4444 100%);
  --sg-gradient-v-r:     linear-gradient(135deg, #8B5CF6 0%, #F43F5E 100%);

  /* ---------------------------------------------------------------
     4. SPACING SCALE
     --------------------------------------------------------------- */
  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-5: 24px;
  --sg-space-6: 32px;
  --sg-space-7: 48px;
  --sg-space-8: 64px;
  --sg-space-9: 96px;
  --sg-section: 88px;

  /* ---------------------------------------------------------------
     5. LAYOUT GRID
     --------------------------------------------------------------- */
  --sg-container: 1200px;
  --sg-gutter: 24px;
  --sg-grid-gap: 24px;

  /* ---------------------------------------------------------------
     6. RADII
     --------------------------------------------------------------- */
  --sg-radius-sm: 8px;
  --sg-radius:    14px;
  --sg-radius-lg: 20px;
  --sg-radius-pill: 9999px;

  /* ---------------------------------------------------------------
     7. COMPONENT METRICS
     --------------------------------------------------------------- */
  --sg-control-h:    46px;
  --sg-control-h-sm: 36px;
  --sg-control-px:   22px;
  --sg-card-pad:     28px;
  --sg-header-h:     72px;

  /* ---------------------------------------------------------------
     8. TYPOGRAPHY
     Outfit pour des titres modernes et percutants,
     Plus Jakarta Sans pour le confort de lecture de l'interface,
     JetBrains Mono pour le code et les IP/serveurs.
     --------------------------------------------------------------- */
  --sg-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sg-font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --sg-font-mono: 'JetBrains Mono', monospace;

  --sg-text-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --sg-text-h2: clamp(1.65rem, 1.35rem + 1.2vw, 2.25rem);
  --sg-text-h3: 1.375rem;
  --sg-text-h4: 1.125rem;
  --sg-text-h5: 0.95rem;
  --sg-text-body: 0.95rem;
  --sg-text-lead: 1.125rem;
  --sg-text-sm: 0.8125rem;
  --sg-text-label: 0.6875rem;

  --sg-leading-tight: 1.12;
  --sg-leading-snug: 1.35;
  --sg-leading: 1.65;

  /* ---------------------------------------------------------------
     9. ELEVATION & SHADOWS
     Ombres colorées douces pour un effet de profondeur spectaculaire
     --------------------------------------------------------------- */
  --sg-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.05);
  --sg-shadow:    0 6px 18px -4px rgba(15, 23, 42, 0.08),
                  0 2px 6px -2px rgba(15, 23, 42, 0.04);
  --sg-shadow-md: 0 12px 30px -8px rgba(15, 23, 42, 0.12),
                  0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --sg-shadow-lg: 0 20px 48px -12px rgba(15, 23, 42, 0.18),
                  0 8px 20px -4px rgba(139, 92, 246, 0.14);
  --sg-shadow-glow: 0 10px 30px -5px rgba(139, 92, 246, 0.3),
                    0 6px 20px -5px rgba(239, 68, 68, 0.2);

  --sg-scrim:     rgba(15, 23, 42, 0.6);
  --sg-wash:      rgba(248, 250, 254, 0.92);
  --sg-ring:      0 0 0 3px rgba(139, 92, 246, 0.25);

  --sg-ease: cubic-bezier(.22,.61,.36,1);
  --sg-fast: .16s;
  --sg-base: .26s;

  /* ---------------------------------------------------------------
     10. LEGACY BRIDGE WHMCS / BOOTSTRAP
     --------------------------------------------------------------- */
  --primary:        var(--sg-violet);
  --primary-dark:   var(--sg-violet-hover);
  --primary-darker: var(--sg-violet-press);
  --primary-light:  var(--sg-violet-soft);

  --secondary:      var(--sg-blue);
  --info:           var(--sg-blue);
  --danger:         var(--sg-red);
  --danger-light:   var(--sg-red-soft);
  --warning:        var(--sg-amber);
  --worning:        var(--sg-amber);
  --warning-light:  var(--sg-amber-soft);
  --success:        var(--sg-green);
  --success-light:  var(--sg-green-soft);

  --gray:       var(--sg-text-dim);
  --gray-light: var(--sg-surface-2);
  --dark:       var(--sg-surface-dark);
  --white:      var(--sg-surface);

  --body-color:    var(--sg-text);
  --heading-color: var(--sg-heading);
  --border-color:  var(--sg-line);
  --border-dark-color: var(--sg-line-firm);
  --border-primary-light: var(--sg-violet-line);

  --custom-radius: var(--sg-radius);
  --font-family-sans-serif: var(--sg-font);
  --font-family-monospace:  var(--sg-font-mono);
}