/* ============================================================
   TIDEMARK RESTORATION — Design Tokens
   Aesthetic: 24/7 emergency authority. Deep marine navy + white,
   one signal-red CTA, cool cyan accents. Sharp, blocky, industrial.
   ============================================================ */
:root {
  /* — Marine navy — */
  --navy-950: #06121f;
  --navy-900: #0a1d30;
  --navy-850: #0c243b;
  --navy-800: #0e2c47;
  --navy-700: #123a5c;
  --navy-600: #1a4f78;
  --navy-500: #2a6391;
  --navy-400: #4d7da6;

  /* — Cool neutrals — */
  --white: #ffffff;
  --off: #f2f6f9;
  --mist: #e3edf3;
  --line-light: #d4e0e9;
  --steel-500: #5c7a93;
  --steel-400: #7b96ab;
  --steel-300: #a7bccd;

  /* — Signal red CTA (emergency) — */
  --cta: #d81e0d;
  --cta-strong: #b3160a;
  --cta-soft: #ffd9d4;
  --cta-bar: #c81808;

  /* — Cyan + live accents — */
  --cyan: #1fb6cc;
  --cyan-deep: #14808f;
  --live: #34d27b;

  /* — Semantic — */
  --bg: var(--white);
  --bg-dark: var(--navy-900);
  --bg-mist: var(--off);
  --text: #0d2034;
  --text-muted: #4a6178;
  --text-on-dark: #d7e6f0;
  --text-on-dark-mut: #93afc4;
  --brand: var(--navy-800);
  --line: var(--line-light);
  --star: #ffb020;

  /* — Type — */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-eyebrow: 0.74rem;
  --fs-body: 1.05rem;
  --fs-lead: 1.2rem;
  --step-1: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem);
  --step-2: clamp(1.4rem, 1.15rem + 1.1vw, 1.95rem);
  --step-3: clamp(1.8rem, 1.4rem + 1.9vw, 2.7rem);
  --step-4: clamp(2.2rem, 1.6rem + 3vw, 3.5rem);
  --step-5: clamp(2.5rem, 1.7rem + 4.2vw, 4.35rem);

  /* — Shape (sharp/blocky) — */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 4px;

  /* — Shadows (deep, cool) — */
  --sh-sm: 0 1px 2px rgba(6, 18, 31, 0.10);
  --sh-md: 0 14px 30px -14px rgba(6, 18, 31, 0.35);
  --sh-lg: 0 30px 60px -24px rgba(6, 18, 31, 0.55);
  --sh-cta: 0 14px 26px -10px rgba(216, 30, 13, 0.55);

  /* — Layout — */
  --maxw: 1180px;
  --gutter: clamp(1.1rem, 5vw, 2.4rem);
  --section-y: clamp(3.2rem, 7vw, 6rem);
}