/* ===========================================
   FLOWBRAIN DESIGN SYSTEM — Variables
   Aurora Dark: futuristic, glassmorphism, neon
   =========================================== */

/* ---- Self-hosted fonts (RGPD-compliant, no Google Fonts request) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/inter-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/inter-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root {
  /* ---- Aurora Dark — Core Palette ---- */
  --color-bg:          #050510;
  --color-bg-2:        #0a0a1a;
  --color-bg-3:        #0f0f24;
  --color-bg-elevated: #12122a;
  --color-black:       #000000;
  --color-dark:        #050510;
  --color-dark-2:      #0a0a1a;
  --color-dark-3:      #0f0f24;
  --color-white:       #ffffff;
  --color-light:       #0f0f24;
  --color-light-2:     #151530;
  --color-gray:        #8888aa;
  --color-gray-dark:   rgba(255,255,255,0.5);
  --color-border:      rgba(255,255,255,0.06);
  --color-border-light: rgba(255,255,255,0.06);

  /* ---- Accent Colors ---- */
  --color-accent:      #00c896;
  --color-accent-dark: #00a87d;
  --color-accent-light:#34d399;
  --color-indigo:      #6366f1;
  --color-indigo-dark: #4f46e5;
  --color-indigo-light:#818cf8;
  --color-purple:      #a855f7;
  --color-purple-dark: #9333ea;
  --color-purple-light:#c084fc;

  /* ---- Text Hierarchy (light-on-dark) ---- */
  --color-text-primary:   rgba(255, 255, 255, 0.95);
  --color-text-secondary: rgba(255, 255, 255, 0.55);
  --color-text-tertiary:  rgba(255, 255, 255, 0.3);

  /* ---- Aurora Gradients ---- */
  --gradient-aurora:      linear-gradient(135deg, #00c896 0%, #6366f1 50%, #a855f7 100%);
  --gradient-aurora-soft: linear-gradient(135deg, rgba(0,200,150,0.15), rgba(99,102,241,0.15), rgba(168,85,247,0.15));
  --gradient-aurora-bg:   linear-gradient(160deg, #050510 0%, #0a0a2e 40%, #0f0f24 70%, #050510 100%);
  --gradient-glow:        linear-gradient(135deg, #00c896, #00a87d);
  --gradient-text:        linear-gradient(135deg, #00c896, #6366f1, #a855f7);

  /* ---- Glassmorphism ---- */
  --glass-bg:           rgba(255, 255, 255, 0.03);
  --glass-bg-hover:     rgba(255, 255, 255, 0.06);
  --glass-bg-strong:    rgba(255, 255, 255, 0.05);
  --glass-border:       rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(255, 255, 255, 0.12);
  --glass-border-accent: rgba(0, 200, 150, 0.2);
  --glass-blur:         20px;
  --glass-radius:       16px;

  /* ---- Glow Effects ---- */
  --glow-accent:       0 0 20px rgba(0, 200, 150, 0.3), 0 0 60px rgba(0, 200, 150, 0.1);
  --glow-accent-hover: 0 0 30px rgba(0, 200, 150, 0.5), 0 0 80px rgba(0, 200, 150, 0.2);
  --glow-accent-soft:  0 0 15px rgba(0, 200, 150, 0.15);
  --glow-indigo:       0 0 20px rgba(99, 102, 241, 0.3), 0 0 60px rgba(99, 102, 241, 0.1);
  --glow-purple:       0 0 20px rgba(168, 85, 247, 0.3), 0 0 60px rgba(168, 85, 247, 0.1);

  /* ---- Typography ---- */
  --font-display:      'Inter', system-ui, sans-serif;
  --font-body:         'Inter', system-ui, sans-serif;
  --font-accent:       'Poppins', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', monospace;

  /* ---- Sizing ---- */
  --hero-size:         clamp(3rem, 6vw, 5.5rem);
  --h2-size:           clamp(2.25rem, 4vw, 3.5rem);
  --h3-size:           clamp(1.25rem, 2vw, 1.75rem);
  --body-size:         1rem;
  --small-size:        0.875rem;

  /* ---- Layout ---- */
  --container-max:     1200px;
  --container-narrow:  900px;
  --section-py:        140px;
  --section-py-mobile: 80px;
  --card-radius:       16px;
  --img-radius:        12px;
  --card-gap:          24px;

  /* ---- Transitions ---- */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:     0.3s;
  --duration-base:     0.6s;
  --duration-slow:     1s;

  /* ---- Z-index ---- */
  --z-content:         1;
  --z-cursor-glow:     0;
  --z-header:          50;
  --z-scroll-progress: 51;
  --z-overlay:         60;
  --z-modal:           70;
}