/* ==========================================================================
   VARIABLES.CSS — BOSS Design System Tokens
   ==========================================================================
   All design decisions are centralized here.
   Change any value below to update the entire website.
   
   WordPress/Elementor Migration:
   These map directly to Elementor Global Colors / Global Fonts settings.
   ========================================================================== */

:root {

  /* ========================================================================
     COLORS — Material Design 3 Palette
     ======================================================================== */

  /* Core Brand */
  --primary:                    #000000;
  --on-primary:                 #ffffff;
  --primary-container:          #131b2e;
  --on-primary-container:       #7c839b;
  --primary-fixed:              #dae2fd;
  --primary-fixed-dim:          #bec6e0;
  --on-primary-fixed:           #131b2e;
  --on-primary-fixed-variant:   #3f465c;
  --inverse-primary:            #bec6e0;

  /* Secondary */
  --secondary:                  #0058be;
  --on-secondary:               #ffffff;
  --secondary-container:        #2170e4;
  --on-secondary-container:     #fefcff;
  --secondary-fixed:            #d8e2ff;
  --secondary-fixed-dim:        #adc6ff;
  --on-secondary-fixed:         #001a42;
  --on-secondary-fixed-variant: #004395;

  /* Tertiary */
  --tertiary:                   #000000;
  --on-tertiary:                #ffffff;
  --tertiary-container:         #2a1700;
  --on-tertiary-container:      #b87500;
  --tertiary-fixed:             #ffddb8;
  --tertiary-fixed-dim:         #ffb95f;
  --on-tertiary-fixed:          #2a1700;
  --on-tertiary-fixed-variant:  #653e00;

  /* Error */
  --error:                      #ba1a1a;
  --on-error:                   #ffffff;
  --error-container:            #ffdad6;
  --on-error-container:         #93000a;

  /* Surface System */
  --background:                 #FCFCFD;
  --on-background:              #191c1d;
  --surface:                    #FCFCFD;
  --on-surface:                 #191c1d;
  --surface-variant:            #e1e3e4;
  --on-surface-variant:         #45464d;
  --surface-tint:               #565e74;
  --surface-bright:             #FCFCFD;
  --surface-dim:                #d9dadb;
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      #f3f4f5;
  --surface-container:          #edeeef;
  --surface-container-high:     #e7e8e9;
  --surface-container-highest:  #e1e3e4;
  --surface-glass:              rgba(255, 255, 255, 0.7);
  --inverse-surface:            #2e3132;
  --inverse-on-surface:         #f0f1f2;

  /* Outline */
  --outline:                    #76777d;
  --outline-variant:            #c6c6cd;

  /* Special Brand Colors */
  --whatsapp-green:             #25D366;
  --stripe-indigo:              #635BFF;


  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */

  /* Font Families */
  --font-heading:               'Sora', sans-serif;
  --font-body:                  'Inter', sans-serif;

  /* Font Sizes — Display */
  --text-display-xl:            72px;
  --text-display-xl-lh:         80px;
  --text-display-xl-ls:         -0.04em;
  --text-display-xl-fw:         800;

  --text-display-lg:            60px;
  --text-display-lg-lh:         72px;
  --text-display-lg-ls:         -0.03em;
  --text-display-lg-fw:         700;

  /* Font Sizes — Headline */
  --text-headline-lg:           48px;
  --text-headline-lg-lh:        56px;
  --text-headline-lg-ls:        -0.02em;
  --text-headline-lg-fw:        700;

  --text-headline-lg-mobile:    32px;
  --text-headline-lg-mobile-lh: 40px;
  --text-headline-lg-mobile-ls: -0.02em;
  --text-headline-lg-mobile-fw: 700;

  --text-headline-md:           30px;
  --text-headline-md-lh:        38px;
  --text-headline-md-fw:        600;

  /* Font Sizes — Body */
  --text-body-lg:               18px;
  --text-body-lg-lh:            28px;
  --text-body-lg-fw:            400;

  --text-body-md:               16px;
  --text-body-md-lh:            24px;
  --text-body-md-fw:            400;

  /* Font Sizes — Label */
  --text-label-bold:            14px;
  --text-label-bold-lh:         20px;
  --text-label-bold-ls:         0.05em;
  --text-label-bold-fw:         600;

  /* Font Sizes — Price */
  --text-price-display:         40px;
  --text-price-display-lh:      48px;
  --text-price-display-fw:      700;


  /* ========================================================================
     SPACING
     ======================================================================== */

  --space-xs:                   4px;
  --space-sm:                   8px;
  --space-md:                   16px;
  --space-lg:                   24px;
  --space-xl:                   40px;
  --space-2xl:                  64px;
  --space-3xl:                  120px;

  /* Layout Spacing */
  --margin-mobile:              20px;
  --gutter:                     24px;
  --stack-gap:                  16px;
  --container-max:              1280px;
  --section-padding:            120px;


  /* ========================================================================
     BORDER RADIUS
     ======================================================================== */

  --radius-sm:                  0.25rem;
  --radius-md:                  0.5rem;
  --radius-lg:                  0.75rem;
  --radius-xl:                  1rem;
  --radius-2xl:                 1.5rem;
  --radius-3xl:                 2.5rem;
  --radius-full:                9999px;


  /* ========================================================================
     SHADOWS
     ======================================================================== */

  --shadow-sm:                  0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md:                  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:                  0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 4px 12px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl:                  0 12px 40px rgba(0, 88, 190, 0.12);
  --shadow-2xl:                 0 20px 50px rgba(0, 0, 0, 0.12);
  --shadow-nav:                 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-whatsapp:            0 8px 32px rgba(37, 211, 102, 0.3);
  --shadow-bottom-nav:          0 -4px 10px rgba(0, 0, 0, 0.08);


  /* ========================================================================
     GLASS CARD
     ======================================================================== */

  --glass-bg:                   rgba(255, 255, 255, 0.65);
  --glass-blur:                 32px;
  --glass-border:               rgba(255, 255, 255, 0.35);
  --glass-shadow:               0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.02), 0 0 1px rgba(0, 0, 0, 0.04);


  /* ========================================================================
     GRADIENTS
     ======================================================================== */

  --gradient-mesh:              radial-gradient(at 0% 0%, hsla(210, 100%, 93%, 1) 0, transparent 50%),
                                radial-gradient(at 50% 0%, hsla(220, 100%, 95%, 1) 0, transparent 50%),
                                radial-gradient(at 100% 0%, hsla(210, 100%, 93%, 1) 0, transparent 50%);

  --gradient-mesh-alt:          radial-gradient(at 0% 0%, rgba(216, 226, 255, 0.4) 0, transparent 50%),
                                radial-gradient(at 50% 0%, rgba(255, 221, 184, 0.2) 0, transparent 50%),
                                radial-gradient(at 100% 0%, rgba(173, 198, 255, 0.3) 0, transparent 50%);

  --gradient-glow-blob:         radial-gradient(circle, rgba(0, 88, 190, 0.1) 0%, rgba(255, 255, 255, 0) 70%);

  --gradient-cta-overlay:       linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);


  /* ========================================================================
     TRANSITIONS
     ======================================================================== */

  --transition-fast:            150ms ease;
  --transition-base:            300ms ease;
  --transition-slow:            500ms ease;
  --transition-image:           700ms ease;


  /* ========================================================================
     BOSS-PREFIXED ALIASES
     ========================================================================
     Every PHP template in this theme was written using --boss-* custom
     property names (e.g. var(--boss-primary)), but this file only ever
     defined the un-prefixed versions (--primary, --secondary, etc). That
     mismatch meant hundreds of inline styles across the theme silently
     fell back to browser defaults instead of the real brand colors/fonts/
     spacing — this is why buttons, text, and notices were rendering in
     black/default instead of the intended design.
     
     Rather than edit every PHP file, every --boss-* name used anywhere in
     the theme is aliased here to its real token. A handful of names were
     never defined under ANY name (success/warning/danger/accent/border/
     surface-alt/font-primary/font-secondary/journey tokens) — those are
     given real values below, chosen to match the existing Material-3
     palette and shadow/spacing scale already in use.
     ======================================================================== */

  /* Color aliases */
  --boss-primary:               var(--primary);
  --boss-on-primary:             var(--on-primary);
  --boss-secondary:              var(--secondary);
  --boss-on-secondary:           var(--on-secondary);
  --boss-background:             var(--background);
  --boss-on-background:          var(--on-background);
  --boss-surface:                var(--surface);
  --boss-on-surface:              var(--on-surface);
  --boss-on-surface-variant:      var(--on-surface-variant);
  --boss-surface-glass:           var(--surface-glass);

  /* Tokens with no un-prefixed equivalent at all — defined directly */
  --boss-border:                 var(--outline-variant);      /* #c6c6cd */
  --boss-surface-alt:             var(--surface-container-low); /* #f3f4f5 */
  --boss-accent:                 var(--secondary);             /* #0058be */
  --boss-success:                #16a34a;
  --boss-warning:                #f59e0b;
  --boss-danger:                 var(--error);                 /* #ba1a1a */

  /* Typography aliases */
  --boss-font-heading:            var(--font-heading);
  --boss-font-body:               var(--font-body);
  --boss-font-primary:            var(--font-heading);
  --boss-font-secondary:          var(--font-body);
  --boss-text-body-lg:            var(--text-body-lg);

  /* Spacing aliases */
  --boss-space-xs:                var(--space-xs);
  --boss-space-sm:                var(--space-sm);
  --boss-space-md:                var(--space-md);
  --boss-space-lg:                var(--space-lg);
  --boss-space-xl:                var(--space-xl);
  --boss-space-2xl:               var(--space-2xl);
  --boss-space-3xl:               var(--space-3xl);

  /* Radius aliases */
  --boss-radius-sm:               var(--radius-sm);
  --boss-radius-md:               var(--radius-md);
  --boss-radius-lg:               var(--radius-lg);
  --boss-radius-xl:               var(--radius-xl);
  --boss-radius-2xl:              var(--radius-2xl);
  --boss-radius-3xl:              var(--radius-3xl);
  --boss-radius-full:             var(--radius-full);

  /* Shadow aliases */
  --boss-shadow-sm:               var(--shadow-sm);
  --boss-shadow-md:               var(--shadow-md);
  --boss-shadow-lg:               var(--shadow-lg);
  --boss-shadow-xl:               var(--shadow-xl);

  /* Transition aliases */
  --boss-transition-fast:         var(--transition-fast);

  /* Journey Line engine tokens — never defined anywhere; sensible defaults
     matching the brand blue accent already used for glow/highlight effects */
  --boss-journey-glow:            rgba(0, 88, 190, 0.45);
  --boss-journey-width:           3px;
  --boss-atmosphere-opacity:      0.6;
}