/* ==========================================================================
   Living Fresh Cleaning — Design Tokens
   Concept: "Light Enters Clean Space"
   Palette anchored on the logo blue (#1F6FC4).
   ========================================================================== */

:root {
  /* ---- Ink (cinematic dark base) ------------------------------------- */
  --ink-900: #04101c;
  --ink-800: #071a2c;
  --ink-700: #0c2740;
  --ink-600: #12364f;

  /* ---- Brand blue ramp ----------------------------------------------- */
  --blue-700: #0f4380;
  --blue-600: #1554a0;
  --blue-500: #1f6fc4; /* logo blue — primary */
  --blue-400: #3d8fe0;
  --blue-300: #6fb0ee;

  /* ---- Light accents (the "light source") ---------------------------- */
  --cyan-400: #4fc3f7;
  --cyan-300: #7dd9ff;
  --mint-400: #3fd9a8;

  /* ---- Paper (light bands) ------------------------------------------- */
  --paper-50: #ffffff;
  --paper-100: #f4f8fc;
  --paper-200: #e4edf6;
  --paper-300: #cfdeed;

  /* ---- Text ----------------------------------------------------------- */
  --slate-700: #22394c; /* headings on light  — 10.9:1 on paper-100 */
  --slate-500: #4a6579; /* body on light      —  6.1:1 on paper-100 */
  --slate-400: #6d879b; /* muted on light     —  3.6:1 — large text only */

  --on-dark: #eef5fb; /* body on ink        — 15.2:1 on ink-800 */
  --on-dark-muted: #9db4c7; /* muted on ink —  7.1:1 on ink-800 */

  /* ---- RGB channels for alpha compositing ---------------------------- */
  --rgb-cyan: 79, 195, 247;
  --rgb-blue: 31, 111, 196;
  --rgb-mint: 63, 217, 168;
  --rgb-ink: 4, 16, 28;
  --rgb-white: 255, 255, 255;

  /* ---- Signature gradients -------------------------------------------- */
  --grad-hero: radial-gradient(120% 90% at 50% 0%, #1f6fc4 0%, #071a2c 55%, #04101c 100%);
  --grad-glow: radial-gradient(closest-side, rgba(var(--rgb-cyan), 0.55), transparent 70%);
  --grad-text: linear-gradient(105deg, #ffffff 0%, #7dd9ff 45%, #3d8fe0 100%);
  --grad-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  --grad-fresh: linear-gradient(135deg, #4fc3f7, #3fd9a8);
  --grad-cta: linear-gradient(140deg, #1554a0 0%, #1f6fc4 45%, #0c2740 100%);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Clash Display", "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Satoshi", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display-xl: clamp(2.75rem, 8.2vw, 8rem);
  --fs-display-lg: clamp(2.25rem, 4.2vw, 3.5rem);
  --fs-display-md: clamp(1.85rem, 3.6vw, 3.15rem);
  --fs-heading-md: clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-heading-sm: clamp(1.15rem, 1.7vw, 1.4rem);
  --fs-body-lg: clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 0.94;
  --lh-snug: 1.12;
  --lh-body: 1.7;

  --ls-display: -0.03em;
  --ls-eyebrow: 0.18em;

  /* ---- Spacing scale --------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1280px;
  --container-wide: 1560px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  --nav-h: 84px;

  /* ---- Radii ----------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Elevation & glow ------------------------------------------------ */
  --shadow-sm: 0 2px 8px rgba(var(--rgb-ink), 0.08);
  --shadow-md: 0 18px 40px -18px rgba(var(--rgb-ink), 0.28);
  --shadow-lg: 0 40px 90px -30px rgba(var(--rgb-ink), 0.45);
  --glow-cyan: 0 0 0 1px rgba(var(--rgb-cyan), 0.35), 0 12px 44px -8px rgba(var(--rgb-cyan), 0.45);
  --glow-soft: 0 18px 60px -20px rgba(var(--rgb-cyan), 0.35);

  /* ---- Easing & duration ----------------------------------------------- */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1); /* settle, slight authority */
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot — "has weight" */
  --d-fast: 0.24s;
  --d-mid: 0.5s;
  --d-slow: 0.9s;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-grain: 5;
  --z-nav: 100;
  --z-menu: 95;
  --z-progress: 110;
  --z-cursor: 200;
}

/* Reduced motion: collapse durations globally so any transition that slips
   through the JS gate is still near-instant. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0.01s;
    --d-mid: 0.15s;
    --d-slow: 0.2s;
  }
}