/* ==========================================================================
   variables.css
   Design tokens for Easy Bond Cleaning. Every color, spacing, radius,
   shadow, and breakpoint value used across the site is defined once here.
   ========================================================================== */

:root {
  /* ---- Brand colors (sampled directly from the logo's blue/green) ---- */
  --color-primary: #0B63C4;          /* logo blue — dominant brand color */
  --color-primary-dark: #084A94;
  --color-primary-light: #4C9AE8;    /* light blue accent */
  --color-primary-50: #EAF3FC;       /* tint for soft backgrounds */

  --color-accent: #3DAA0A;           /* logo green, exact client-specified hex */
  --color-accent-dark: #2B7A07;
  --color-accent-50: #E7F4E1;

  --color-charcoal: #1C222B;         /* body text, not pure black */
  --color-charcoal-muted: #5B6472;   /* secondary text */
  --color-charcoal-faint: #8A93A2;   /* tertiary / placeholder text */

  --color-white: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F6F9FD;          /* alternating section background */
  --color-bg-deep: #08182E;          /* dark sections (final CTA, footer) */
  --color-border: #E5EAF1;
  --color-border-soft: #EEF2F7;

  --color-star: #FFB020;

  /* ---- Typography ---- */
  --font-heading: 'Manrope', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.5rem, 4.2vw + 1rem, 4.25rem);
  --fs-h2: clamp(2rem, 2.4vw + 1rem, 3rem);
  --fs-h3: clamp(1.375rem, 1vw + 1rem, 1.75rem);
  --fs-h4: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --fs-lead: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  --lh-tight: 1.12;
  --lh-heading: 1.25;
  --lh-body: 1.7;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  /* Slightly more generous than before — a calmer, less "packed" rhythm
     between sections, inspired by the ClanyEco reference. */
  --section-padding-y: clamp(4rem, 7vw, 8rem);

  /* ---- Radii ----
     Softer/smaller than a typical rounded-pill SaaS look: cards and
     panels use small-to-moderate rounding; --radius-btn is deliberately
     its own (smaller) token so buttons read as grounded rectangles with
     soft corners rather than full pills. --radius-full is reserved for
     genuinely circular/pill elements (badges, tags, icon circles). */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-btn: 12px;
  --radius-full: 999px;

  /* ---- Shadows (soft, blue-tinted for a premium feel) ----
     Toned down from an earlier, heavier pass (client feedback: the design
     read as "heavy" with sliders/cards/containers stacking large blurred
     shadows). Same visual language, less blur radius and opacity so it
     reads as a subtle lift rather than a weight. */
  --shadow-sm: 0 1px 6px rgba(11, 99, 196, 0.05);
  --shadow-md: 0 6px 16px rgba(11, 99, 196, 0.08);
  --shadow-lg: 0 12px 28px rgba(11, 99, 196, 0.10);
  --shadow-glow-primary: 0 10px 24px rgba(11, 99, 196, 0.20);
  --shadow-glow-accent: 0 8px 20px rgba(61, 170, 10, 0.18);

  /* ---- Layout ---- */
  --container-max: 1320px;
  --transition-fast: 0.2s ease;
  --transition-base: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Z-index scale ---- */
  --z-preloader: 9999;
  --z-header: 1000;
  --z-mobile-menu: 1100;
  --z-modal: 1200;
  --z-floating: 900;
}