/* ==========================================================================
   INFOSSELCONNECT — DESIGN SYSTEM VARIABLES
   Premium Enterprise SaaS · Event Management Platform
   ========================================================================== */

:root {
  /* ---- Brand Colors ---- */
  --color-primary: #5B5FEF;
  --color-primary-rgb: 91, 95, 239;
  --color-secondary: #7C4DFF;
  --color-secondary-rgb: 124, 77, 255;
  --color-accent: #00C2FF;
  --color-accent-rgb: 0, 194, 255;

  --color-bg: #F8FAFC;
  --color-dark: #0F172A;
  --color-dark-rgb: 15, 23, 42;

  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  /* ---- Extended neutral scale (derived, for depth) ---- */
  --ink-900: #0A0E1A;
  --ink-800: #0F172A;
  --ink-700: #1B2438;
  --ink-600: #2A3652;
  --ink-500: #46527A;
  --ink-400: #6B7A9E;
  --ink-300: #97A3C0;
  --ink-200: #C7CFE3;
  --ink-100: #E7EBF5;
  --ink-50:  #F8FAFC;
  --white: #FFFFFF;

  /* ---- Gradients ---- */
  --gradient-brand: linear-gradient(135deg, #5B5FEF 0%, #7C4DFF 55%, #00C2FF 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(91,95,239,0.12) 0%, rgba(124,77,255,0.12) 55%, rgba(0,194,255,0.12) 100%);
  --gradient-dark: linear-gradient(180deg, #0A0E1A 0%, #0F172A 60%, #131B31 100%);
  --gradient-aurora: radial-gradient(60% 60% at 20% 20%, rgba(124,77,255,0.35) 0%, rgba(124,77,255,0) 60%),
                      radial-gradient(50% 50% at 80% 30%, rgba(0,194,255,0.28) 0%, rgba(0,194,255,0) 60%),
                      radial-gradient(60% 60% at 50% 90%, rgba(91,95,239,0.30) 0%, rgba(91,95,239,0) 60%);
  --gradient-text: linear-gradient(90deg, #FFFFFF 0%, #C7CFE3 100%);
  --gradient-line: linear-gradient(90deg, rgba(91,95,239,0) 0%, rgba(124,77,255,0.6) 50%, rgba(0,194,255,0) 100%);

  /* ---- Typography ---- */
  --font-display: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  --font-body: 'Manrope', 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --fs-2xs: 0.6875rem;   /* 11px */
  --fs-xs:  0.8125rem;   /* 13px */
  --fs-sm:  0.9375rem;   /* 15px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:  1.125rem;    /* 18px */
  --fs-lg:  1.375rem;    /* 22px */
  --fs-xl:  1.75rem;     /* 28px */
  --fs-2xl: 2.25rem;     /* 36px */
  --fs-3xl: 3rem;        /* 48px */
  --fs-4xl: 4rem;        /* 64px */
  --fs-5xl: 5.25rem;     /* 84px */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* ---- Spacing scale ---- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2rem;
  --sp-xl: 3rem;
  --sp-2xl: 4.5rem;
  --sp-3xl: 6.5rem;
  --sp-4xl: 9rem;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.18);
  --shadow-glow: 0 0 0 1px rgba(91,95,239,0.15), 0 20px 60px rgba(91,95,239,0.25);
  --shadow-glow-accent: 0 0 0 1px rgba(0,194,255,0.15), 0 20px 50px rgba(0,194,255,0.2);

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.68, -0.4, 0.27, 1.4);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.8s;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --nav-height: 84px;
  --border-hairline: 1px solid rgba(15, 23, 42, 0.08);
  --border-hairline-dark: 1px solid rgba(255, 255, 255, 0.08);
}