/* ==========================================================================
   Brayfield Towing, Dayton IN
   Design tokens. Nothing in styles.css may hardcode a colour, size or space.
   Blue and steel are sampled from the client's own logo.
   ========================================================================== */
:root {
  --c-red:        #1F4FBF;   /* the accent role. Brayfield blue. */
  --c-red-dk:     #15368A;
  --c-red-lt:     #8FB6F5;
  --c-red-glow:   #5C95F0;
  --c-red-tint:   #E9F0FD;
  --c-amber:      #FFC02E;   /* amber beacon, 24/7 signals only */
  --c-ink:        #0F1115;
  --c-ink-2:      #191C22;
  --c-steel:      #8D96A3;
  --c-white:      #FFFFFF;
  --c-paper:      #F5F6F8;
  --c-grey:       #E9EBEF;
  --c-body:       #474D57;
  --c-muted:      #565D68;
  --c-line:       #DDE0E5;
  --c-line-dk:      rgba(255,255,255,.15);
  --c-on-dark:      rgba(255,255,255,.84);
  --c-on-dark-soft: rgba(255,255,255,.72);
  --c-on-dark-mute: rgba(255,255,255,.68);
  --c-glass:        rgba(255,255,255,.07);
  --c-focus:      rgba(31,79,191,.35);

  --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --fs-1: 0.6875rem;
  --fs-2: 0.8125rem;
  --fs-3: 1rem;
  --fs-4: 1.5rem;
  --fs-5: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  --fs-6: clamp(2.75rem, 1.1rem + 6.4vw, 5.5rem);

  --fw-bold:   600;
  --fw-black:  700;
  --lh-tight:  1.0;
  --lh-snug:   1.1;
  --lh-body:   1.65;
  --ls-wide:   .18em;
  --ls-wider:  .26em;
  --ls-tight:  .005em;

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 4rem;
  --sp-9: 5.5rem;  --sp-10: 7.5rem;

  --wrap: 78rem;
  --gutter: var(--sp-4);
  --radius: 2px;
  --rule: 4px;
  --header-h: 6.5rem;

  --scrim-hero:
    linear-gradient(100deg, rgba(15,17,21,.95) 0%, rgba(15,17,21,.9) 42%, rgba(15,17,21,.7) 70%, rgba(15,17,21,.42) 100%),
    linear-gradient(to bottom, rgba(15,17,21,.6), rgba(15,17,21,.32));
  --scrim-caption: linear-gradient(to top, rgba(15,17,21,.96), rgba(15,17,21,0));

  --shadow-sm: 0 2px 10px -4px rgba(15,17,21,.2);
  --shadow-md: 0 18px 34px -22px rgba(15,17,21,.5);
  --shadow-lg: 0 28px 60px -30px rgba(15,17,21,.6);

  --t-fast: .18s ease;
  --t-base: .28s ease;
  --t-slow: .5s cubic-bezier(.22,.61,.36,1);
}