/* ============================================================
   Carolina Water Systems — Design tokens (production bundle)
   Ported verbatim from the brand design system:
   colors · typography · spacing/radius/shadow/motion · base.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand blue scale (the water) ---- */
  --blue-50:  #F0F7FB;
  --blue-100: #E9F3F8;
  --blue-200: #CFE6F1;
  --blue-300: #A6D2E6;
  --blue-400: #58B0D6;  /* logo light blue — accent */
  --blue-500: #2C7CA8;  /* logo mid blue — PRIMARY */
  --blue-600: #246A92;
  --blue-700: #1C5478;
  --blue-800: #103B53;  /* logo navy — deep brand */
  --blue-900: #0B2A3D;

  /* ---- Cool neutral slate scale ---- */
  --slate-50:  #F7F9FB;
  --slate-100: #EEF2F6;
  --slate-200: #DFE6EC;
  --slate-300: #C4D0DA;
  --slate-400: #93A4B3;
  --slate-500: #647889;
  --slate-600: #47596A;
  --slate-700: #33424F;
  --slate-800: #1F2C37;
  --slate-900: #111A22;
  --white: #FFFFFF;

  /* ---- Fresh accent (clean / healthy water) ---- */
  --aqua-400: #3FBFB4;
  --aqua-500: #1FA197;
  --aqua-600: #168077;

  /* ---- Semantic status ---- */
  --green-100: #DCF1E8;
  --green-500: #2F9E7E;
  --green-700: #1E6E57;
  --amber-100: #FBEDD4;
  --amber-500: #E0922F;
  --amber-700: #9C6113;
  --red-100:   #FBE3E3;
  --red-500:   #D14545;
  --red-700:   #952E2E;

  /* ---- Semantic aliases ---- */
  --brand-primary:       var(--blue-500);
  --brand-primary-hover: var(--blue-600);
  --brand-deep:          var(--blue-800);
  --brand-accent:        var(--blue-400);
  --brand-fresh:         var(--aqua-500);

  --text-strong:   var(--blue-900);
  --text-body:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-subtle:   var(--slate-400);
  --text-on-brand: var(--white);
  --text-link:     var(--blue-600);

  --surface-page:    var(--slate-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--slate-100);
  --surface-tint:    var(--blue-50);
  --surface-brand:   var(--blue-500);
  --surface-deep:    var(--blue-800);
  --surface-inverse: var(--blue-900);

  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-brand:   var(--blue-400);
  --ring-focus:     color-mix(in srgb, var(--blue-400) 55%, transparent);

  --success: var(--green-500); --success-bg: var(--green-100);
  --warning: var(--amber-500); --warning-bg: var(--amber-100);
  --danger:  var(--red-500);   --danger-bg:  var(--red-100);
  --info:    var(--blue-500);  --info-bg:    var(--blue-100);

  /* ---- Typography ---- */
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: var(--font-sans);

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

  --text-display-xl: 4.25rem;
  --text-display-l:  3.25rem;
  --text-display-m:  2.5rem;
  --text-h1: 2rem; --text-h2: 1.5rem; --text-h3: 1.25rem;
  --text-lg: 1.125rem; --text-base: 1rem; --text-sm: 0.875rem; --text-xs: 0.75rem;

  --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.65;
  --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.08em;

  /* ---- Spacing (8px grid) ---- */
  --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;

  /* ---- Radius ---- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;

  --border-thin: 1px; --border-med: 1.5px; --border-thick: 2px;

  /* ---- Shadows (cool-tinted, navy) ---- */
  --shadow-xs: 0 1px 2px rgba(16, 59, 83, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 59, 83, 0.08), 0 1px 2px rgba(16, 59, 83, 0.05);
  --shadow-md: 0 6px 16px rgba(16, 59, 83, 0.10), 0 2px 4px rgba(16, 59, 83, 0.06);
  --shadow-lg: 0 18px 38px rgba(16, 59, 83, 0.14), 0 6px 12px rgba(16, 59, 83, 0.07);
  --shadow-xl: 0 32px 64px rgba(16, 59, 83, 0.18);
  --shadow-brand: 0 12px 28px rgba(44, 124, 168, 0.30);
  --shadow-focus: 0 0 0 4px var(--ring-focus);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
}

/* ============================================================
   DARK THEME — the intended look for the marketing site.
   Overrides the semantic surface/text/border aliases above
   (verbatim from the brand kit's marketing index.html). Brand
   blues stay as accents. Applies site-wide (all pages link this).
   ============================================================ */
:root {
  --surface-page:    #07141C;
  --surface-card:    #0F2330;
  --surface-sunken:  #0A1A24;
  --surface-tint:    #0C1F2B;
  --surface-deep:    #04101A;
  --surface-inverse: #030B12;

  --text-strong: #EAF4FA;
  --text-body:   #B6C8D4;
  --text-muted:  #8198A6;
  --text-subtle: #5E7382;
  --text-link:   var(--blue-300);

  --border-subtle:  rgba(255, 255, 255, 0.09);
  --border-default: rgba(255, 255, 255, 0.16);
  --blue-200:       rgba(120, 180, 210, 0.18);
}

::selection { background: rgba(88, 176, 214, 0.35); color: #fff; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
  font-weight: var(--fw-bold);
}

p { margin: 0; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.cws-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-primary);
}

::selection { background: var(--blue-200); color: var(--blue-900); }