/* ==========================================================================
   Power House Diesel, Show Low AZ
   Design tokens. Nothing in styles.css may hardcode a colour, size or space.

   The green is sampled off the PHD oval on his own shop sign, which reads
   about #50A040. That mid green is only 3.6:1 on white and cannot carry type,
   so --c-accent is the same hue darkened to 6.1:1 for text and buttons, and
   --c-accent-lt is it raised to 9.2:1 for use on ink. The bright sign green
   survives untouched in --c-accent-sign, which is only ever a fill.
   ========================================================================== */
:root {
  --c-accent:      #2E7014;
  --c-accent-dk:   #24580F;
  --c-accent-lt:   #7DC94F;
  --c-accent-sign: #50A040;
  --c-accent-tint: #ECF5E7;
  --c-on-accent:   #FFFFFF;
  --c-accent-ink:  #2E7014;

  --c-ink:        #0F1410;
  --c-ink-2:      #18201A;
  --c-steel:      #8B9099;
  --c-white:      #FFFFFF;
  --c-paper:      #F6F8F4;
  --c-grey:       #EAEEE6;
  --c-body:       #474C48;
  --c-muted:      #585E59;
  --c-line:       #DCE0D8;
  --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(46,112,20,.55);

  --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(10,14,11,.95) 0%, rgba(10,14,11,.91) 34%,
                            rgba(10,14,11,.68) 52%, rgba(10,14,11,.22) 74%,
                            rgba(10,14,11,.08) 100%),
    linear-gradient(to bottom, rgba(10,14,11,.42) 0%, rgba(10,14,11,0) 32%);
  --scrim-hero-sm:
    linear-gradient(to bottom, rgba(10,14,11,.93) 0%, rgba(10,14,11,.85) 46%, rgba(10,14,11,.91) 100%);
  --scrim-caption: linear-gradient(to top, rgba(10,14,11,.96), rgba(10,14,11,0));

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

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