/* ============================================
   BITBYTE CREATIONS — Design Tokens
   Premium Modern SaaS Layout — Mobile-First
   ============================================ */

:root {
  /* ---- Brand Colors (Ant Design Blue Palette) ---- */
  --primary:          #1677ff; /* Ant Design Blue */
  --primary-dark:     #0958d9; 
  --primary-light:    #69b1ff; /* Bright Cyan Highlight */
  --primary-bg:       #e6f4ff;
  --primary-border:   #91caff;
  --primary-glow:     rgba(105, 177, 255, 0.15);

  --secondary:        #4F46E5; /* Deep Indigo Accent */
  --secondary-dark:   #4338CA;
  --secondary-light:  #818CF8;

  --accent:           #F59E0B; /* Warm Amber */
  --accent-dark:      #D97706;
  --accent-light:     #FCD34D;
  --accent-glow:      rgba(245, 158, 11, 0.15);

  /* ---- Neutrals (Refined Slate / Tailwind Grayscale) ---- */
  --white:            #FFFFFF;
  --off-white:        #F8FAFC; /* Slate 50 */
  --gray-50:          #F1F5F9; /* Slate 100 */
  --gray-100:         #E2E8F0; /* Slate 200 */
  --gray-200:         #CBD5E1; /* Slate 300 */
  --gray-300:         #94A3B8; /* Slate 400 */
  --gray-400:         #64748B; /* Slate 500 */
  --gray-500:         #475569; /* Slate 600 */
  --gray-600:         #334155; /* Slate 700 */
  --gray-700:         #1E293B; /* Slate 800 */
  --gray-800:         #0F172A; /* Slate 900 */
  --gray-900:         #020617; /* Slate 950 */

  /* ---- Dark palette (Hero & CTA Sections) ---- */
  --dark-bg:          #050a18; /* Deep Navy */
  --dark-card:        rgba(15, 23, 42, 0.7); /* Glass-ready card */
  --dark-border:      rgba(255, 255, 255, 0.12);
  --glass-border:     rgba(255, 255, 255, 0.08);

  /* ---- Semantic ---- */
  --success:          #10B981; /* Emerald 500 */
  --warning:          #F59E0B; /* Amber 500 */
  --error:            #EF4444; /* Red 500 */
  --info:             var(--primary);

  /* ---- Gradients (Richer, dynamic feel) ---- */
  --gradient-hero:      linear-gradient(135deg, #050a18 0%, #0a1628 60%, #1e3a8a 100%);
  --gradient-cta:       linear-gradient(135deg, #1677ff 0%, #003eb3 100%);
  --gradient-vibrant:   linear-gradient(135deg, #0369a1 0%, #6d28d9 50%, #be185d 100%);
  --gradient-card:      linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --gradient-accent:    linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);

  /* ---- Typography ---- */
  --font-primary:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-2xs:   0.75rem;
  --text-xs:    0.875rem;
  --text-sm:    0.9375rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   2rem;
  --text-4xl:   2.5rem;
  --text-5xl:   3.25rem;
  --text-6xl:   4rem;

  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ---- Spacing (Dense Enterprise Rhythm) ---- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;    
  --space-12:  3rem;
  --space-16:  4rem;    
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ---- Layout ---- */
  --container-xs:     540px;
  --container-max:    1280px;
  --container-narrow: 900px;
  --container-wide:   1440px;
  --header-height:    68px;

  /* ---- Borders (Softer and larger radii) ---- */
  --radius-sm:    6px;
  --radius-md:    12px;  /* Buttons */
  --radius-lg:    16px;  /* Small cards */
  --radius-xl:    24px;  /* Large features/cards */
  --radius-2xl:   32px;  /* Giant prominent images */
  --radius-full:  9999px; /* Pills */

  --border-color: #E2E8F0;
  --border:       1px solid var(--border-color);

  /* ---- Shadows (Ant Design style, lighter) ---- */
  --shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  --shadow-md:    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --shadow-lg:    0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
  --shadow-xl:    0 9px 28px -8px rgba(0, 0, 0, 0.08), 0 16px 32px 0 rgba(0, 0, 0, 0.05), 0 24px 64px 24px rgba(0, 0, 0, 0.03);
  --shadow-2xl:   0 25px 50px -12px rgb(0 0 0 / 0.15);
  --shadow-primary: 0 4px 14px -2px rgba(37, 99, 235, 0.4);
  --shadow-card-hover: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05), 0 0 0 1px var(--primary-border);

  /* ---- Phone Mockup ---- */
  --phone-width:        240px;
  --phone-height:       480px;
  --phone-radius:       32px;
  --phone-bezel:        10px;
  --phone-notch-width:  120px;
  --phone-notch-height: 28px;
  --phone-shadow:       0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.1);

  /* ---- Pricing ---- */
  --pricing-popular-border: var(--primary);
  --pricing-popular-bg:     var(--primary-bg);

  /* ---- Transitions ---- */
  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:    250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-index ---- */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-float-cta: 250;
  --z-mobile-cta: 260;
}