/* Gordon Roofing, Inc. Design tokens. World: "Over your head, under control."
   Light overcast base, one brick accent, ink like wet shingle. No teal, no navy, no cream. */

:root {
  /* color */
  --overcast: #ECEEF0;   /* page base */
  --panel: #F8F9FA;      /* raised band */
  --ink: #1B1E21;        /* shingle */
  --muted: #58606A;
  --hairline: rgba(27, 30, 33, 0.14);
  --brick: #8C3A34;      /* accent, text safe on base */
  --brick-deep: #7A322D; /* hover step */
  --on-brick: #F5EFEA;   /* text on brick fills */
  --galv: #6E7A82;       /* diagram linework only */
  --under: #1B1E21;      /* dark underlayment band */
  --on-under: #EDEFF1;
  --on-under-muted: #9AA3AB;
  --scrim: rgba(15, 17, 19, 0.62);

  /* type */
  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Nunito Sans", "Segoe UI", sans-serif;

  /* space, 8px base */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  /* layout */
  --max: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 2px;

  /* motion */
  --snap: 160ms cubic-bezier(.3, .7, .3, 1);
  --ease-lay: cubic-bezier(.22, .8, .36, 1);
}