/* Patelzick's shared palette. All pages and components use these tokens.
   Cobalt is for actions and links. Pink is limited to small highlights.
   Keep large surfaces grey or white; pair pink with ink and cobalt with white. */
:root {
  --sans: Arial, Helvetica, sans-serif;
  --brand-cobalt: #1D4ED8;
  --brand-pink: #FF5EC4;
  --brand-grey: #F1F2F4;
  --brand-white: #FFFFFF;
  --brand-black: #121212;
  --brand-midnight: #101A2E;

  --accent: var(--brand-cobalt);
  --highlight: var(--brand-pink);
  --paper: var(--brand-grey);
  --paper-2: var(--brand-grey);
  --white: var(--brand-white);
  --ink: var(--brand-black);
  --muted: var(--brand-black);
  --line: rgba(18, 18, 18, .16);
  --field-border: rgba(18, 18, 18, .5);
  --rule: var(--line);
  --copper: var(--accent);
}

html, body { font-family: var(--sans); background: var(--paper); color: var(--ink); }
a { color: var(--accent); }
header { background: var(--ink); color: var(--white); }
footer { background: var(--white); color: var(--ink); }
nav a, .wordmark, .brand { color: var(--ink); }
input, select, textarea { accent-color: var(--accent); }
input, select, textarea, button { color: var(--ink); }
::placeholder { color: var(--ink); opacity: 1; }
::selection { background: var(--highlight); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Decorative vector arrows inherit the surrounding link or button color. */
.arrow-icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}