/******************************************************************
 *
 * MAIN STYLESHEET
 * Project: FlowSync Template
 *
 * TABLE OF CONTENTS
 * -----------------
 * 1.  Color Variables (Light Mode - Default)
 * 2.  Color Variables (Dark Mode)
 * 3.  General & Component Styles
 * - 3.1. Default Body Styles
 * - 3.2. Header Styles
 * - 3.3. Logo Visibility Toggle
 * - 3.4. Active Navigation Link
 * - 3.5. Pricing Badge
 * 4.  Keyframe Animations
 * - 4.1. "Your Flows" Section Animations
 *
 ******************************************************************/





/*=============================================
 =   1. Color Variables (Light Mode - Default)
 =============================================*/

:root {

  /*-- Primary Color Scale (Violet/Indigo) --*/
  --primary-50:  rgba(236, 240, 255, 1);
  --primary-100: rgba(219, 227, 255, 1);
  --primary-200: rgba(187, 199, 255, 1);
  --primary-300: rgba(154, 172, 255, 1);
  --primary-400: rgba(122, 144, 255, 1);
  --primary-500: rgba(99, 118, 255, 1);
  --primary-600: rgba(57,  89,  255, 1);
  --primary-700: rgba(45,  71,  229, 1);
  --primary-800: rgba(36,  57,  184, 1);
  --primary-900: rgba(29,  46,  147, 1);

  /*-- Secondary Color Scale (Cyan) --*/
  --secondary-50:  rgba(230, 252, 253, 1);
  --secondary-100: rgba(204, 249, 251, 1);
  --secondary-200: rgba(179, 244, 248, 1);
  --secondary-300: rgba(140, 236, 242, 1);
  --secondary-400: rgba( 92, 226, 236, 1);
  --secondary-500: rgba(  0, 224, 239, 1);
  --secondary-600: rgba(  0, 202, 215, 1);

  /*-- Typography --*/
  --text-primary:   rgba(17, 24, 39, 1);
  --text-secondary: rgba(55, 65, 81, 1);
  --text-muted:     rgba(107,114,128,1);
  --text-on-primary: rgba(255,255,255,1);

  /*-- Backgrounds & Surfaces --*/
  --bg-primary:   rgba(255,255,255,1);
  --bg-secondary: rgba(249,250,251,1);
  --bg-muted:     rgba(243,244,246,1);
  --bg-secondary-rgb: 249,250,251; /* Used for transparent backgrounds */

  /*-- Borders & Dividers --*/
  --border-primary:   rgba(229,231,235,1);
  --border-secondary: rgba(209,213,219,1);

  /*-- Status & Feedback --*/
  --success: rgba(16, 185, 129, 1);
  --warning: rgba(245, 158,  11, 1);
  --error:   rgba(239,  68,  68, 1);

  /*-- Component-Specific Tokens --*/
  --primary-icon-bg:   var(--primary-100);
  --secondary-icon-bg: var(--secondary-100);
  --success-icon-bg:   rgba(209, 250, 229, 1);
  --cta-button-bg:   rgba(255,255,255,1);
  --cta-button-text: var(--primary-700);
  --link:        var(--primary-600);
  --link-hover:  var(--primary-700);
  --icon-filter: none;

  /*-- Hero Section Background Blobs --*/
  --hero-blob-1: rgba(89, 117, 255, 0.2);
  --hero-blob-2: rgba(0, 224, 239, 0.15);
  --hero-blob-3: rgba(236, 240, 255, 0.6);
}





/*=============================================
 =   2. Color Variables (Dark Mode)
 =============================================*/

html.dark {

  /*-- Primary Color Scale (inverted for dark mode) --*/
  --primary-50:  rgba(29,  46, 147, 1);
  --primary-100: rgba(36,  57, 184, 1);
  --primary-200: rgba(45,  71, 229, 1);
  --primary-300: rgba(57,  89, 255, 1);
  --primary-400: rgba(99, 118, 255, 1);
  --primary-500: rgba(122, 144,255, 1);
  --primary-600: rgba(154, 172,255, 1);
  --primary-700: rgba(187, 199,255, 1);
  --primary-800: rgba(219, 227,255, 1);
  --primary-900: rgba(236, 240,255, 1);

  /*-- Secondary Color Scale --*/
  --secondary-50:  rgba(  0, 103, 110, 1);
  --secondary-100: rgba(  0, 129, 137, 1);
  --secondary-200: rgba(  0, 162, 172, 1);
  --secondary-300: rgba(  0, 189, 201, 1);
  --secondary-400: rgba(  0, 208, 221, 1);
  --secondary-500: rgba( 51, 230, 242, 1);
  --secondary-600: rgba(102, 236, 245, 1);

  /*-- Typography --*/
  --text-primary:   rgba(249,250,251,1);
  --text-secondary: rgba(229,231,235,1);
  --text-muted:     rgba(156,163,175,1);
  --text-on-primary: rgba(255,255,255,1);

  /*-- Backgrounds & Surfaces --*/
  --bg-primary:   rgba(17, 24, 39, 1);
  --bg-secondary: rgba(24, 33, 51, 1);
  --bg-muted:     rgba(31, 41, 55, 1);
  --bg-secondary-rgb: 24, 33, 51; /* Used for transparent backgrounds */

  /*-- Borders & Dividers --*/
  --border-primary:   rgba(45, 55, 72, 1);
  --border-secondary: rgba(61, 72, 92, 1);

  /*-- Status & Feedback --*/
  --success: rgba(52, 211, 153, 1);
  --warning: rgba(251, 191,  36, 1);
  --error:   rgba(248, 113, 113, 1);

  /*-- Component-Specific Tokens --*/
  --primary-icon-bg:   rgba(57,  89, 255, 0.18);
  --secondary-icon-bg: rgba( 0, 224, 239, 0.18);
  --success-icon-bg:   rgba(16, 185, 129, 0.18);
  --cta-button-bg:   rgba(255,255,255,0.12);
  --cta-button-text: rgba(255,255,255,1);
  --link:       var(--primary-400);
  --link-hover: var(--primary-300);
  --icon-filter: brightness(0) invert(1);

  /*-- Hero Section Background Blobs --*/
  --hero-blob-1: rgba(57, 89, 255, 0.3);
  --hero-blob-2: rgba(0, 161, 172, 0.25);
  --hero-blob-3: rgba(29, 46, 147, 0.4);
}





/*=============================================
 =   3. General & Component Styles
 =============================================*/

/*-- 3.1. Default Body Styles --*/
body {
  font-family: "Inter", sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}


/*-- 3.2. Header Styles --*/

/* Default transparent state for the header */
header {
  background-color: transparent;
  border-color: transparent;
  backdrop-filter: none;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out,
    backdrop-filter 0.3s ease-in-out;
}

/* Style for the header when the page is scrolled */
header.scrolled {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: var(--border-secondary);
  backdrop-filter: blur(1rem);
}

/* Scrolled header style specific to dark mode */
html.dark header.scrolled {
    background-color: rgba(17, 24, 39, 0.5);
}

/* Background for mobile header when the menu is open */
@media (max-width: 767px) {
  header.mobile-open {
    background-color: rgba(var(--bg-secondary-rgb), 0.75);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-secondary);
  }
}


/*-- 3.3. Logo Visibility Toggle --*/

/* Hide the dark logo by default */
.logo-dark {
  display: none;
}

/* When in dark mode, hide the light logo... */
html.dark .logo-light {
  display: none;
}

/* ...and show the dark logo */
html.dark .logo-dark {
  display: block;
}


/*-- 3.4. Active Navigation Link --*/
.nav-link.active {
  color: var(--primary-500);
  font-weight: 600;
}


/*-- 3.5. Pricing Badge --*/
.most-popular-badge {
  background-color: var(--primary-500);
  color: var(--text-on-primary);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  display: inline-block;
}





/*=============================================
 =   4. Keyframe Animations
 =============================================*/

/*-- 4.1. "Your Flows" Section Animations --*/

@keyframes fade-out-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-50%);
  }
}

@keyframes slide-up-to-top {
  from {
    transform: translateY(0);
  }
  to {
    /* Moves the element up by its own height plus spacing */
    transform: translateY(calc(-100% - 1rem));
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation helper classes */
.animate-fade-out-up {
  animation: fade-out-up 0.5s ease-in-out forwards;
}

.animate-slide-up {
  animation: slide-up-to-top 0.5s ease-in-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.5s ease-in-out forwards;
}