/* ============================================================
   Pompe de Apă — Design Tokens
   Direction: "Aqua fluid immersiv" — deep marine blue base,
   clean teal/cyan accent, fluid waves, premium & trustworthy.
   Light-first with immersive gradient anchor sections.
   ============================================================ */

:root {
  /* --- Marine blue scale --- */
  --c-blue-950: #041d33;   /* deepest — footer / hero base */
  --c-blue-900: #062a4a;
  --c-blue-800: #0a3a63;
  --c-blue-700: #0e4d7f;
  --c-blue-600: #14639b;

  /* --- Teal / cyan accent (water) --- */
  --c-accent:      #0fb5c9;   /* primary accent */
  --c-accent-600:  #0a97a9;
  --c-accent-400:  #35cad9;
  --c-accent-300:  #4fd6e0;   /* light glow */
  --c-accent-soft: rgba(15, 181, 201, 0.12);
  --c-accent-ring: rgba(15, 181, 201, 0.34);

  /* --- Cool surfaces --- */
  --c-surface:   #f6f9fb;  /* page bg */
  --c-surface-2: #eef4f8;  /* alt section bg */
  --c-surface-3: #e4eef4;
  --c-white:     #ffffff;

  /* --- Text --- */
  --c-ink:       #0b2740;  /* headings on light */
  --c-body:      #33475a;  /* body text on light */
  --c-muted:     #6b7d8d;  /* muted / captions */
  --c-on-dark:   #e9f4f8;  /* text on blue */
  --c-on-dark-muted: #9fc0d4;

  /* --- Lines --- */
  --c-line:      rgba(11, 39, 64, 0.10);
  --c-line-2:    rgba(11, 39, 64, 0.16);
  --c-line-dark: rgba(233, 244, 248, 0.14);

  /* --- Status --- */
  --c-success:   #17a673;
  --c-success-bg: rgba(23, 166, 115, 0.10);
  --c-error:     #e04848;
  --c-error-bg:  rgba(224, 72, 72, 0.10);

  /* --- Gradients / atmosphere --- */
  --grad-hero: linear-gradient(155deg, #062a4a 0%, #0a3a63 42%, #0e5f86 78%, #0fb5c9 130%);
  --grad-cta:  linear-gradient(120deg, #0a3a63 0%, #0e4d7f 45%, #0a97a9 100%);
  --grad-accent: linear-gradient(120deg, #0fb5c9 0%, #14639b 100%);
  --glow-teal: radial-gradient(closest-side, rgba(79, 214, 224, 0.55), rgba(79, 214, 224, 0) 70%);

  /* --- Typography --- */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --text-2xl:  clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem);
  --text-3xl:  clamp(2rem, 1.55rem + 2.1vw, 3.15rem);
  --text-hero: clamp(2rem, 1.5rem + 2.3vw, 3.6rem);

  --lh-tight: 1.05;
  --lh-snug: 1.22;
  --lh-body: 1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  --ls-tight: -0.02em;
  --ls-wide: 0.14em;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4rem, 2.6rem + 5.5vw, 7.5rem);
  --container: 1200px;
  --container-narrow: 900px;

  /* --- Radius (fluid, generous) --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* --- Shadows (cool-tinted, soft) --- */
  --shadow-sm: 0 1px 2px rgba(11, 39, 64, 0.06),
               0 3px 10px rgba(11, 39, 64, 0.05);
  --shadow-md: 0 8px 24px rgba(11, 39, 64, 0.09),
               0 2px 6px rgba(11, 39, 64, 0.06);
  --shadow-lg: 0 24px 60px rgba(11, 39, 64, 0.16),
               0 10px 24px rgba(11, 39, 64, 0.08);
  --shadow-accent: 0 14px 34px rgba(15, 181, 201, 0.34);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* --- Motion --- */
  --dur-fast: 160ms;
  --dur: 300ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  --header-h: 78px;
}