/* ==========================================================================
   Joe Towing & Recovery, Louisville KY
   Design tokens. Nothing in styles.css may hardcode a colour, size or space.

   Red and black are taken from his own logo (the shield on the truck door).
   --c-accent #c8102e is 5.9:1 on white, so it carries type and buttons;
   --c-accent-lt is raised to 6.7:1 for use on ink. The logo's bright red
   survives in --c-accent-sign, which is only ever a fill.
   ========================================================================== */
:root {
  --c-accent:      #C8102E;
  --c-accent-dk:   #9E0C24;
  --c-accent-lt:   #FF6B78;
  --c-accent-sign: #E3262F;
  --c-accent-tint: #FDECEE;
  --c-on-accent:   #FFFFFF;
  --c-accent-ink:  #C8102E;

  --c-ink:        #121212;
  --c-ink-2:      #1C1C1C;
  --c-steel:      #8B9099;
  --c-white:      #FFFFFF;
  --c-paper:      #F7F7F7;
  --c-grey:       #EDEDED;
  --c-body:       #474747;
  --c-muted:      #5C5C5C;
  --c-line:       #DEDEDE;
  --c-line-dk:      rgba(255,255,255,.16);
  --c-on-dark:      rgba(255,255,255,.86);
  --c-on-dark-soft: rgba(255,255,255,.74);
  --c-on-dark-mute: rgba(255,255,255,.68);
  --c-glass:        rgba(255,255,255,.07);
  --c-focus:      rgba(200,16,46,.55);
  --c-star:       #F5B301;

  --font-display: "Bai Jamjuree", "Arial Narrow", Impact, 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.75rem;
  --fs-5: clamp(2.1rem, 1.1rem + 3.4vw, 3.75rem);
  --fs-6: clamp(2.2rem, 0.8rem + 4.6vw, 4rem);

  --fw-bold:   600;
  --fw-black:  700;
  --lh-tight:  0.96;
  --lh-snug:   1.05;
  --lh-body:   1.65;
  --ls-wide:   .18em;
  --ls-wider:  .26em;
  --ls-tight:  -.01em;

  --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: 3px;
  --rule: 4px;
  --header-h: 6.5rem;

  --scrim-hero:
    linear-gradient(100deg, rgba(12,12,12,.95) 0%, rgba(12,12,12,.91) 34%,
                            rgba(12,12,12,.68) 52%, rgba(12,12,12,.22) 74%,
                            rgba(12,12,12,.08) 100%),
    linear-gradient(to bottom, rgba(12,12,12,.42) 0%, rgba(12,12,12,0) 32%);
  --scrim-hero-sm:
    linear-gradient(to bottom, rgba(12,12,12,.93) 0%, rgba(12,12,12,.85) 46%, rgba(12,12,12,.91) 100%);
  --scrim-caption: linear-gradient(to top, rgba(12,12,12,.96), rgba(12,12,12,0));

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

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