/* ========================================================================== */
/*                     CENTRALIZED VARIABLES STYLESHEET                      */
/*                  Change values here to update your entire site             */
/* ========================================================================== */

:root {
  /* ======================================================================== */
  /*                              FONTS                                      */
  /* ======================================================================== */
  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Darker Grotesque", sans-serif;
  --font-monospace: "Montserrat", monospace;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 1000;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* ======================================================================== */
  /*                            FONT SIZES                                   */
  /* ======================================================================== */

  /* Headings */
  --font-size-h1: 50px;           /* Desktop */
  --font-size-h1-mobile: 2.88651rem;
  --font-size-h2: 1.60181rem;     /* Desktop */
  --font-size-h2-mobile: calc(1.28518rem + 0.42217vw);
  --font-size-h3: 1.42383rem;     /* Desktop */
  --font-size-h3-mobile: calc(1.26738rem + 0.20859vw);
  --font-size-h4: 1.26563rem;     /* Desktop */
  --font-size-h4-mobile: calc(1.25156rem + 0.01875vw);
  --font-size-h5: 1.125rem;
  --font-size-h6: 0.88889rem;

  /* Body Text */
  --font-size-base: 1rem;
  --font-size-paragraph: 20px;
  --font-size-link: 15px;
  --font-size-small: 0.75rem;
  --font-size-code: 75%;

  /* Hero & Special */
  --font-size-hero-title: 4.62363rem;  /* Desktop */
  --font-size-hero-title-lg: 5.20158rem;
  --font-size-video-title: 36px;
  --font-size-button: 18px;
  --font-size-carousel-caption: 40px;

  /* ======================================================================== */
  /*                              COLORS                                     */
  /* ======================================================================== */

  /* Primary Colors */
  --color-primary: #622289;
  --color-secondary: #5E6282;
  --color-dark: #232323;
  --color-dark-alt: #212832;
  --color-light: #F0F4F9;
  --color-white: #FFFEFE;

  /* Status Colors */
  --color-success: #79B93C;
  --color-info: #006380;
  --color-warning: #622289;
  --color-danger: #DF6951;

  /* Accent Colors */
  --color-accent-blue: #747DEF;
  --color-accent-indigo: #6237FF;
  --color-accent-purple: #A1B0FC;
  --color-accent-pink: #D42DA3;
  --color-accent-cyan: #2fc4f1;

  /* Text Colors */
  --text-primary: #010101;
  --text-secondary: #5E6282;
  --text-light: #999;
  --text-muted: #BDBDBD;
  --text-code: #D42DA3;

  /* Background Colors */
  --bg-primary: #FFFEFE;
  --bg-secondary: #F0F4F9;
  --bg-gray-light: #EEEEEE;
  --bg-overlay-dark: rgba(0, 0, 0, 0.5);
  --bg-overlay-light: rgba(255, 254, 254, 0.2);

  /* Border & Divider Colors */
  --color-border: #EEEEEE;
  --color-input-bg: #ffffff;
  --color-input-text: #39425D;

  /* Component Colors */
  --color-icon-bg: rgba(255, 254, 254, 0.2);
  --color-icon-border: rgba(255, 254, 254, 0.3);
  --color-service-card-bg: #AC7AC9;
  --color-button-shadow: rgba(172, 122, 201, 0.47);
  --color-danger-shadow: rgba(223, 105, 81, 0.3);

  /* ======================================================================== */
  /*                         SPACING & LAYOUT                                */
  /* ======================================================================== */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 2.5rem;
  --spacing-xxl: 3rem;

  /* ======================================================================== */
  /*                       BORDER RADIUS & SHADOWS                           */
  /* ======================================================================== */
  --border-radius-small: 0.625rem;
  --border-radius-medium: 10px;
  --border-radius-large: 15px;
  --border-radius-circle: 50%;

  --shadow-sm: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0.5rem 0.5rem 1.5rem rgba(110, 74, 156, 0.1);
  --shadow-lg: 0 6.25rem 5rem 0 rgba(0, 0, 0, 0.02);

  /* ======================================================================== */
  /*                        TRANSITIONS & ANIMATIONS                         */
  /* ======================================================================== */
  --transition-fast: 0.15s linear;
  --transition-normal: 0.3s linear;
  --transition-slow: 0.5s ease;

  /* ======================================================================== */
  /*                          BREAKPOINTS                                    */
  /* ======================================================================== */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
}

/* ========================================================================== */
/*           BRAND / THEME PALETTE  (site-wide primary brand colors)         */
/*        Update these six values to re-skin the entire site instantly        */
/* ========================================================================== */
:root {
  --primary:       #534AB7;   /* Main brand color – buttons, icons, accents  */
  --primary-dark:  #3C3489;   /* Hover / pressed state                        */
  --primary-light: #7F77DD;   /* Highlights, eyebrows, span text              */
  --primary-soft:  #AFA9EC;   /* Subtle backgrounds, star particles           */
  --primary-pale:  #CECBF6;   /* Very light tints, star particles             */
  --primary-deep:  #26215C;   /* Dark headings on light backgrounds           */

  --network-line: rgba(127, 119, 221, 0.45); /* Neural-network edge color     */

  /* ---- Semantic aliases (use these throughout your page styles) ---- */

  /* Body / page defaults */
  --body-bg:                    #ffffff;
  --body-color:                 var(--primary-deep);        /* #1a0533 equivalent */
  --body-font:                  'Poppins', sans-serif;

  /* Text scale */
  --text-body:                  15px;
  --text-body-muted:            #6b7280;
  --text-label-muted:           #9ca3af;
  --text-letter-spacing-wide:   0.18em;
  --text-letter-spacing-normal: 0.13em;

  /* Backgrounds */
  --bg-page:                    #ffffff;
  --bg-section-alt:             #faf8ff;    /* alternate section tint   */
  --bg-purple-panel:            #e9d5ff;    /* hero right panel         */

  /* Hero */
  --hero-heading-color:         var(--primary-deep);
  --hero-heading-font-size:     clamp(24px, 5vw, 42px);    /* contact page  */
  --hero-headline-font-size:    clamp(32px, 4vw, 54px);    /* cotron page   */
  --hero-eyebrow-color:         var(--primary-light);
  --hero-eyebrow-size:          11px;
  --hero-eyebrow-weight:        var(--font-weight-medium);
  --hero-eyebrow-spacing:       var(--text-letter-spacing-wide);
  --hero-sub-color:             var(--text-body-muted);
  --hero-sub-font-size:         var(--text-body);
  --hero-stat-divider-color:    #e5e7eb;

  /* Buttons */
  --btn-primary-bg:             var(--primary);
  --btn-primary-bg-hover:       var(--primary-dark);
  --btn-primary-color:          #ffffff;
  --btn-primary-font-size:      14px;
  --btn-primary-weight:         var(--font-weight-medium);
  --btn-primary-padding:        0.7rem 1.5rem;
  --btn-primary-radius:         var(--border-radius-medium);   /* 10px */

  --btn-outline-color:          var(--primary-light);           /* #c084fc */
  --btn-outline-border:         var(--primary-pale);            /* #c4b5fd */
  --btn-outline-border-hover:   var(--primary-light);

  /* Info / contact cards */
  --card-icon-color:            var(--primary);
  --card-icon-size:             1.6rem;

  /* Feature cards */
  --feature-card-bg:            #ffffff;
  --feature-card-border:        rgba(147, 100, 174, 0.15);
  --feature-card-border-hover:  rgba(147, 100, 174, 0.4);
  --feature-card-radius:        16px;
  --feature-card-shadow-hover:  0 16px 40px rgba(124, 58, 237, 0.12);
  --feature-icon-bg:            linear-gradient(135deg, #e9d5ff, rgba(192, 132, 252, 0.13));
  --feature-icon-border:        rgba(147, 100, 174, 0.2);
  --feature-icon-size:          52px;
  --feature-icon-radius:        12px;
  --feature-heading-color:      var(--primary-deep);
  --feature-body-color:         var(--text-body-muted);

  /* Section shared */
  --section-wrap-padding:       90px 0;
  --section-heading-color:      var(--primary-deep);
  --section-eyebrow-color:      var(--primary-light);
  --section-eyebrow-dot:        var(--primary-light);
  --section-sub-color:          var(--text-body-muted);
  --section-title-font-size:    clamp(26px, 3vw, 40px);

  /* Steps / How it works */
  --step-num-bg:                linear-gradient(135deg, #9364AE, #570089);
  --step-num-color:             #ffffff;
  --step-num-shadow:            0 8px 24px rgba(87, 0, 137, 0.3);
  --step-num-size:              56px;
  --step-connector-color:       linear-gradient(90deg, var(--primary-light), #570089);
  --step-heading-color:         var(--primary-deep);
  --step-body-color:            var(--text-body-muted);

  /* Chat card (hero right panel) */
  --chat-card-bg:               #ffffff;
  --chat-card-radius:           16px;
  --chat-card-shadow:           0 12px 40px rgba(87, 0, 137, 0.15);
  --chat-avatar-bg:             linear-gradient(135deg, #9364AE, #570089);
  --chat-avatar-size:           34px;
  --chat-header-border:         rgba(147, 100, 174, 0.12);
  --chat-header-name-color:     var(--primary-deep);
  --chat-header-status-color:   #9364AE;
  --chat-bubble-bg:             #f3f0ff;           /* bot bubble bg    */
  --chat-bubble-color:          var(--primary-deep);
  --chat-bubble-user-bg:        linear-gradient(135deg, #9364AE, #570089);
  --chat-bubble-user-color:     #ffffff;
  --chat-bubble-dot-bot:        linear-gradient(135deg, #9364AE, #570089);
  --chat-bubble-dot-user:       #e9d5ff;
  --chat-typing-dot-color:      #9364AE;
  --chat-typing-bg:             #f3f0ff;

  /* Stat mini cards (hero panel) */
  --stat-mini-bg:               #ffffff;
  --stat-mini-radius:           12px;
  --stat-mini-shadow:           0 6px 20px rgba(87, 0, 137, 0.10);
  --stat-mini-value-color:      #570089;
  --stat-mini-label-color:      var(--text-label-muted);

  /* Split / use-case sections */
  --split-visual-border:        #ede9fe;
  --split-visual-shadow:        0 12px 40px rgba(124, 58, 237, 0.08);
  --split-visual-radius:        16px;
  --split-bullet-color:         var(--primary-light);
  --split-li-color:             var(--text-body-muted);

  /* CTA band */
  --cta-bg:                     var(--primary-light);        /* #c084fc */
  --cta-title-color:            #ffffff;
  --cta-sub-color:              rgba(255, 255, 255, 0.65);
  --cta-label-color:            rgba(255, 255, 255, 0.55);
  --cta-btn-bg:                 #ffffff;
  --cta-btn-color:              var(--primary-light);

  /* Integration chips */
  --chip-bg:                    #ffffff;
  --chip-border:                rgba(147, 100, 174, 0.2);
  --chip-border-hover:          var(--primary-light);
  --chip-shadow-hover:          0 12px 32px rgba(147, 100, 174, 0.18);
  --chip-label-color:           var(--text-body-muted);

  /* Scroll-reveal animation */
  --reveal-duration:            0.7s;
  --reveal-easing:              ease;
  --reveal-offset:              32px;
}


/* ========================================================================== */
/*                    HOW TO USE THESE VARIABLES                             */
/* ========================================================================== */

/*
EXAMPLE 1 - Using colors:
  color: var(--color-primary);
  background-color: var(--bg-primary);
  border: 1px solid var(--color-border);

EXAMPLE 2 - Using fonts:
  font-family: var(--font-primary);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);

EXAMPLE 3 - Using spacing:
  padding: var(--spacing-md);
  margin: var(--spacing-lg);
  gap: var(--spacing-sm);

EXAMPLE 4 - Using shadows:
  box-shadow: var(--shadow-sm);

EXAMPLE 5 - Using transitions:
  transition: all var(--transition-normal);

EXAMPLE 6 - Using brand colors:
  color: var(--primary);
  background: var(--btn-primary-bg);

TO CHANGE YOUR ENTIRE SITE'S APPEARANCE:
Simply update the values in this file above and ALL your HTML files will update automatically!
*/