/* =========================================================
   Crystal Clarity — design tokens
   Palette sampled from the company logo (blue gradient disc,
   white serif "AG", navy "Touch Cleaning").
   ========================================================= */
:root {
  /* --- brand colour ------------------------------------- */
  --logo-azure: #3f80cf;   /* logo core blue — decorative use only */
  --azure-deep: #2563ae;   /* interactive blue — 6.0:1 on white   */
  --azure-dark: #1d5192;   /* pressed / hover state               */
  --sky-mist:   #93b6f0;   /* logo highlight                      */
  --sky-soft:   #dbe8fb;   /* tinted fills                        */
  --ink-navy:   #0e2240;   /* headings + dark sections            */
  --ink-800:    #16304f;
  --slate:      #4a5b75;   /* body copy — 6.5:1 on frost          */
  --slate-soft: #5f7189;   /* muted text — 4.7:1 on frost (WCAG AA) */
  --frost:      #f4f8fe;   /* page background                     */
  --frost-deep: #e9f1fc;
  --crystal:    #ffffff;
  --aqua:       #5ed3e0;   /* sparkle accent, used sparingly      */
  --wa-green:   #25d366;   /* WhatsApp only                       */
  --amber:      #f0a52c;   /* review stars                        */
  --danger:     #c0392b;

  /* --- gradients ----------------------------------------- */
  --grad-brand: linear-gradient(135deg, #93b6f0 0%, #3f80cf 45%, #2563ae 100%);
  --grad-deep:  linear-gradient(150deg, #16304f 0%, #0e2240 55%, #12305a 100%);
  --grad-text:  linear-gradient(100deg, #2563ae 0%, #3f80cf 45%, #5ed3e0 100%);
  --grad-sheen: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 66%);

  /* --- glass --------------------------------------------- */
  --glass-bg:     rgba(255,255,255,.62);
  --glass-bg-2:   rgba(255,255,255,.78);
  --glass-border: rgba(255,255,255,.75);
  --glass-blur:   blur(18px) saturate(165%);
  --glass-dark-bg:     rgba(20,44,78,.55);
  --glass-dark-border: rgba(147,182,240,.28);

  /* --- shadows (navy tinted, multi-layer) ---------------- */
  --sh-xs: 0 1px 2px rgba(14,34,64,.06);
  --sh-sm: 0 1px 2px rgba(14,34,64,.06), 0 4px 12px rgba(14,34,64,.06);
  --sh-md: 0 1px 2px rgba(14,34,64,.06), 0 8px 24px rgba(14,34,64,.08), 0 24px 64px rgba(37,99,174,.10);
  --sh-lg: 0 2px 4px rgba(14,34,64,.07), 0 16px 36px rgba(14,34,64,.10), 0 40px 90px rgba(37,99,174,.16);
  --sh-glow: 0 10px 30px rgba(37,99,174,.28);
  --sh-inner: inset 0 1px 0 rgba(255,255,255,.9);

  /* --- radii --------------------------------------------- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* --- type ---------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: clamp(2.5rem, 5.6vw, 4.6rem);
  --fs-h2: clamp(1.95rem, 3.6vw, 3.1rem);
  --fs-h3: clamp(1.25rem, 1.9vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;

  /* --- spacing / layout ---------------------------------- */
  --gutter: 20px;
  --wrap: 1200px;
  --wrap-narrow: 860px;
  --section-y: clamp(56px, 6.5vw, 104px);
  --topbar-h: 40px;
  --header-h: 88px;
  --header-h-sm: 66px;

  /* --- motion -------------------------------------------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 160ms;
  --t-mid: 260ms;
  --t-slow: 640ms;

  /* --- z-index scale ------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 30;
  --z-overlay: 40;
  --z-modal: 50;
}