/* ==========================================================================
   BlueConnect — design tokens
   Components reference the SEMANTIC aliases, never the raw ramps.
   ========================================================================== */

:root {
  /* ---- Ambient gradient field ---- */
  --grad-1: #EEF2FE;   /* top-left, near-white periwinkle */
  --grad-2: #E1E8FB;   /* mid blue-lavender */
  --grad-3: #D9DCF6;   /* lower violet cast */
  --grad-4: #CBD5F5;   /* deepest corner */

  --bg-field: radial-gradient(120% 100% at 15% 10%, var(--grad-1) 0%, var(--grad-2) 45%, var(--grad-3) 75%, var(--grad-4) 100%);

  /* ---- Glass surfaces ---- */
  --glass-bg: rgb(255 255 255 / 0.55);
  --glass-bg-strong: rgb(255 255 255 / 0.78);
  --glass-border: rgb(255 255 255 / 0.65);
  --glass-blur: saturate(1.4) blur(20px);

  /* ---- Form panel (teal → blue) ---- */
  --panel-grad: linear-gradient(135deg, #7BB4C0 0%, #6B8FD4 55%, #5C7BD0 100%);
  --panel-field-bg: rgb(255 255 255 / 0.92);

  /* ---- Page & Section Color Palette ---- */
  --bg-soft-ice-blue:  #F2F9FF; /* Main page background */
  --bg-light-cyan:     #EEFDFC; /* Feature sections */
  --bg-mist-blue:      #F4F7FF; /* About section */
  --bg-pale-lavender:  #F8F5FF; /* Testimonials */
  --bg-aqua-white:     #F3FFFF; /* Cards & content areas */
  --bg-cool-gray-blue: #F7FAFD; /* Alternate sections */
  --bg-light-sky:      #EAF8FF; /* CTA backgrounds */
  --bg-soft-mint-blue: #F1FCFB; /* Contact section */

  /* ---- Depth on a tinted field ---- */
  --shadow-glass: 0 2px 8px rgb(38 34 60 / 0.06),
                  0 16px 40px rgb(38 34 60 / 0.10);

  /* ---- Blue ramp (brand #4F7FFF is 500) ---- */
  --blue-50:  #F0F4FF;
  --blue-100: #DFE8FF;
  --blue-200: #C4D4FF;
  --blue-300: #9DB8FF;
  --blue-400: #7599FF;
  --blue-500: #4F7FFF;
  --blue-600: #3D63E6;
  --blue-700: #2F4CBF;
  --blue-800: #263D94;
  --blue-900: #1E2F6B;

  /* ---- WhatsApp accent — small authentic touches ONLY, never dominant ---- */
  --green-100: #E7F9EE;
  --green-500: #25D366;
  --green-600: #1EB855;

  /* ---- Neutrals (cool-tinted, never pure grey) ---- */
  --ink-900: #101426;
  --ink-800: #1E2334;
  --ink-700: #3A3F52;
  --ink-500: #5E6478;
  --ink-400: #838999;
  --ink-300: #B9BECD;
  --ink-200: #E4E8F2;
  --ink-100: #F1F4FA;
  --ink-50:  #F7F9FE;
  --white:   #FFFFFF;

  /* ---- Semantic: brand ---- */
  --color-primary:        var(--blue-500);
  --color-primary-cta:    var(--blue-600);
  --color-primary-hover:  var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-primary-soft:   var(--blue-50);
  --color-primary-muted:  var(--blue-100);
  --color-on-primary:     var(--white);
  --color-link:           var(--blue-600);
  --color-accent:         var(--green-500);
  --color-accent-soft:    var(--green-100);

  /* ---- Semantic: text ---- */
  --color-heading:     var(--ink-900);
  --color-text:        var(--ink-500);
  --color-text-strong: var(--ink-700);
  --color-text-muted:  var(--ink-400);
  --color-on-dark:     var(--white);
  --color-on-dark-dim: var(--blue-200);

  /* ---- Semantic: surfaces ---- */
  --color-bg:        var(--glass-bg-strong);
  --color-bg-alt:    rgb(255 255 255 / 0.45);
  --color-bg-tint:   rgb(255 255 255 / 0.35);
  --color-bg-invert: var(--blue-900);

  /* ---- Semantic: lines & states ---- */
  --color-border:        var(--glass-border);
  --color-border-strong: rgb(180 190 220 / 0.6);
  --color-border-focus:  var(--blue-500);
  --color-error:         #D8434F;
  --color-error-soft:    #FDF0F1;

  /* ---- Typography ---- */
  --font-heading: "Plus Jakarta Sans", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --text-xl:   clamp(1.1875rem, 0.6vw + 1.06rem, 1.375rem);
  --text-2xl:  clamp(1.375rem, 1.2vw + 1.1rem, 1.75rem);
  --text-3xl:  clamp(1.75rem, 3vw + 0.75rem, 2.5rem);
  --text-4xl:  clamp(2rem, 5vw + 0.5rem, 3.5rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;

  /* ---- Spacing (4px base) ---- */
  --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;

  /* ---- Layout ---- */
  --container:        1120px;
  --container-narrow: 720px;
  --gutter:           clamp(1.25rem, 4vw, 2rem);
  --section-py:       clamp(3.5rem, 8vw, 6.5rem);
  --nav-h:            72px;

  /* ---- Radii ---- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- Shadows & Focus ---- */
  --shadow-hue: 38 34 60;
  --shadow-xs: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
  --shadow-sm: 0 2px 4px rgb(var(--shadow-hue) / 0.05),
               0 4px 12px rgb(var(--shadow-hue) / 0.06);
  --shadow-md: 0 4px 8px rgb(var(--shadow-hue) / 0.06),
               0 12px 28px rgb(var(--shadow-hue) / 0.09);
  --shadow-lg: 0 8px 16px rgb(var(--shadow-hue) / 0.07),
               0 24px 56px rgb(var(--shadow-hue) / 0.12);
  --shadow-primary: 0 4px 14px rgb(79 127 255 / 0.28);
  --focus-ring: 0 0 0 3px var(--blue-200);

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);

  /* ---- Layers ---- */
  --z-base: 1;
  --z-nav:  50;
  --z-menu: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}