/* ==========================================================================
   Maryland Mold and Waterproofing . Design tokens
   Concept: the page's color temperature enacts the wet-to-dry transformation
   the company performs. Hero and footer sit in a deep navy ("the water
   problem"); the sections between warm into a sand neutral ("the dry fix").
   A single bright aqua (the droplet highlight already in the logo) is the
   signature accent. Do not hard code hex values in main.css.
   ========================================================================== */

:root {
  /* Brand blues -------------------------------------------------------------
     Kept from the existing logo identity, deepened for a richer range. */
  --brand-100: #e6f2fb;
  --brand-200: #c3e2f7;
  --brand-300: #13ade2; /* logo droplet highlight -- doubles as signature aqua */
  --brand-400: #1a86c9;
  --brand-500: #0d76bc; /* logo primary blue */
  --brand-600: #0a5f99;
  --brand-700: #084b7a;
  --brand-800: #063a5f;

  /* Aqua signature ----------------------------------------------------------
     The one accent color used for glow, focus, and the waterline motif. */
  --aqua-300: #7fe8f0;
  --aqua-400: #2fd9e6;
  --aqua-500: #13ade2;
  --aqua-glow: rgba(47, 217, 230, 0.35);

  /* Navy (deep water) ---------------------------------------------------------
     A dedicated dark-surface scale for the hero, footer, and other "problem"
     sections -- kept separate from the --ink-* text scale below so the two
     never collide. */
  --navy-950: #050b12;
  --navy-900: #0a1420;
  --navy-800: #0f1e2f;
  --navy-700: #17293d;
  --navy-600: #2a3f54;

  /* Sand (dry warmth) ---------------------------------------------------------
     Replaces a cold blue-grey neutral with a warm stone tone -- dryness read
     as warmth, against the hero/footer's cold water-navy. */
  --sand-50: #fbf8f2;
  --sand-100: #f3ede0;
  --sand-200: #e9dfc9;
  --sand-300: #d9c8a4;

  /* Ink text scale (unchanged meaning from the original tokens) -------------- */
  --ink-900: #0d1720;
  --ink-800: #182634;
  --ink-600: #47554e;
  --ink-500: #5d6b77;
  --ink-400: #7b8894;
  --line-100: #eee6d6;
  --line-200: #e2d5b8;
  --surface: #fffdf8;
  --surface-2: #f3ede0;
  --surface-3: #fbf8f2;

  /* Text/borders on dark (navy) surfaces --------------------------------------- */
  --line-dark-100: rgba(255, 255, 255, 0.09);
  --line-dark-200: rgba(255, 255, 255, 0.16);
  --ink-on-dark: #fff;
  --ink-on-dark-2: rgba(255, 255, 255, 0.72);
  --ink-on-dark-3: rgba(255, 255, 255, 0.5);

  /* Status --------------------------------------------------------------------- */
  --success-600: #157347;
  --danger-600: #b42318;

  /* Typography ------------------------------------------------------------------
     Fraunces: a warm, characterful serif for display -- the "craft/trust" voice.
     Inter: clean workhorse for body and UI.
     JetBrains Mono: stat numbers and process steps read like an instrument
     readout (a moisture meter), tying typography back to the trade itself. */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(0.938rem, 0.91rem + 0.13vw, 1rem);
  --step-1: clamp(1.063rem, 1.02rem + 0.21vw, 1.188rem);
  --step-2: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  --step-3: clamp(1.625rem, 1.45rem + 0.86vw, 2.125rem);
  --step-4: clamp(2rem, 1.66rem + 1.7vw, 3rem);
  --step-5: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);
  --step-6: clamp(3rem, 2.1rem + 4.5vw, 5.75rem);

  /* Space ------------------------------------------------------------------ */
  --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-9: 6rem;
  --space-10: 8rem;

  /* Layout ----------------------------------------------------------------- */
  --wrap: 1600px;
  --wrap-narrow: 1040px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Radii and elevation -----------------------------------------------------
     18-30px range per brief -- large enough to read as deliberately soft. */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(8, 15, 24, 0.06);
  --shadow-sm: 0 2px 8px rgba(8, 15, 24, 0.07);
  --shadow-md: 0 10px 30px rgba(8, 15, 24, 0.1);
  --shadow-lg: 0 24px 64px rgba(8, 15, 24, 0.16);
  --shadow-xl: 0 40px 96px rgba(8, 15, 24, 0.22);
  --shadow-brand: 0 10px 30px rgba(13, 118, 188, 0.3);
  --shadow-glow: 0 0 0 1px rgba(47, 217, 230, 0.18), 0 20px 60px rgba(47, 217, 230, 0.18);

  /* Glass ---------------------------------------------------------------------- */
  --glass-light-bg: rgba(255, 253, 248, 0.66);
  --glass-light-border: rgba(255, 255, 255, 0.6);
  --glass-dark-bg: rgba(15, 30, 47, 0.55);
  --glass-dark-border: rgba(255, 255, 255, 0.12);

  /* Motion ----------------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 0.8, 0.24, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 200ms;

  --header-h: 84px;
}

@media (max-width: 1023px) {
  :root {
    --header-h: 68px;
  }
}