/* ───────────────────────────────────────────────
   NEMA NETWORK — Shared design tokens & base reset
   Used by the public marketing pages (index.html, for-facilities.html,
   pricing.html). Extracted from three near-identical copies that had
   started drifting — see the architecture audit. Long-cached (see
   vercel.json) since these change far less often than page content;
   bump the ?v= query param on the <link> tag if you ever need to
   force a refresh for returning visitors.
   ─────────────────────────────────────────────── */

/* ───────────────────────────────────────────────
   Custom Properties — NEMA NETWORK Brand System
─────────────────────────────────────────────── */
:root {
  /* ── Brand tokens ── */
  --color-teal:       #0E6E73;   /* primary — buttons, links, icons, key headings */
  --color-teal-dark:  #0A5559;   /* teal hover/pressed */
  --color-teal-light: #4A9EA3;   /* teal secondary / icon tint */
  --color-navy:       #13293D;   /* body text + footer dark fill */
  --color-amber:      #E2A13C;   /* accent only — amber bg always uses navy text */
  --color-amber-bg:   rgba(226,161,60,0.12);
  --color-amber-border: rgba(226,161,60,0.25);
  --color-mist:       #E4F1F0;   /* soft section-band tint */
  --color-cloud:      #F5F8F8;   /* page background */
  --color-white:      #FFFFFF;   /* cards + main surfaces */
  --color-slate:      #5B6E74;   /* secondary text */
  --color-line:       #DBE6E5;   /* borders */

  /* ── Semantic aliases (keep old names to avoid HTML edits) ── */
  --bg-dark:        var(--color-navy);   /* dark fills: footer, footer-cta */
  --bg-mid:         var(--color-mist);
  --bg-light:       var(--color-white);
  --bg-gray:        var(--color-cloud);
  --accent:         var(--color-teal);
  --accent-light:   var(--color-teal-light);
  --accent-dark:    var(--color-teal-dark);
  --text-primary:   var(--color-navy);
  --text-dark:      var(--color-navy);
  --text-muted:     var(--color-slate);
  --text-muted-dark:var(--color-slate);
  --border:         var(--color-line);
  --border-light:   var(--color-line);
  --card-bg:        var(--color-white);
  --card-bg-light:  var(--color-white);
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 4px 24px rgba(14,110,115,0.10);
  --shadow-card: 0 1px 4px rgba(0,0,0,0.05), 0 4px 16px rgba(14,110,115,0.07);
}

/* ───────────────────────────────────────────────
   Reset & Base
─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--color-cloud);
  color: var(--color-navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }