/* ERA Pro Care design tokens.
   Palette is sampled directly from the client's logo artwork, not approximated. */
:root{
  /* Brand */
  --navy:#082643;
  --navy-700:#0D3355;
  --navy-500:#134B79;
  --navy-050:#EEF2F7;
  --gold:#BD9039;
  --gold-600:#A87C2B;
  /* Text only, on a light background. --gold and --gold-600 read fine as fills,
     icons and hover states, but neither passes WCAG AA (4.5:1) as small text on
     white, gold-600 measures 3.76:1. This shade measures 5.45:1. */
  --gold-700:#8A6222;
  --gold-050:#FBF6EC;

  /* Neutrals */
  --ink:#16202C;
  --text:#3D4A59;
  --muted:#677687;
  --line:#E3E8EE;
  --line-soft:#EFF3F7;
  --white:#FFFFFF;
  --wash:#F6F8FB;

  /* Feedback */
  --ok:#137A4A;
  --ok-bg:#E8F6EF;
  --bad:#B3261E;
  --bad-bg:#FCECEB;

  /* Type */
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --h1: clamp(31px, 5.4vw, 62px);
  --h2: clamp(24px, 3.5vw, 40px);
  --h3: clamp(18px, 2vw, 23px);
  --lead: clamp(15.5px, 1.5vw, 18.5px);
  --base: 16px;
  --small: 14px;
  --tiny: 12.5px;

  /* Rhythm */
  --gap: 20px;
  --section: clamp(52px, 7vw, 96px);
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --wrap: 1180px;
  --wrap-narrow: 780px;

  /* Depth */
  --shadow-sm: 0 1px 3px rgba(8,38,67,.07), 0 1px 2px rgba(8,38,67,.05);
  --shadow: 0 6px 20px rgba(8,38,67,.09);
  --shadow-lg: 0 18px 46px rgba(8,38,67,.16);
  --ring: 0 0 0 3px rgba(189,144,57,.35);
}