/* McFarland Plumbing Services — Design Tokens
   Brand palette pulled from MPSLOGO.png
   Primary orange: #F06000  (dark end of logo gradient)
   Amber highlight: #FF8C00  (light end of logo gradient)
   Dark: charcoal — no blue cast, orange pops cleanly against it
*/

:root {
  /* Brand colours — logo orange gradient */
  --clr-accent:         #F06000;
  --clr-accent-dark:    #D44E00;
  --clr-accent-light:   #FF8C00;

  /* Charcoal darks — neutral, no navy-blue tint */
  --clr-primary:        #1E2228;
  --clr-primary-dark:   #13161A;
  --clr-primary-light:  #2D3340;

  /* Neutrals */
  --clr-dark:           #0D1117;
  --clr-black:          #080C10;
  --clr-white:          #ffffff;
  --clr-grey-50:        #F7F8FA;
  --clr-grey-100:       #ECEEF1;
  --clr-grey-200:       #D3D7DC;
  --clr-grey-400:       #8E95A0;
  --clr-grey-600:       #5A6270;

  /* Semantic */
  --clr-bg:             #F7F8FA;
  --clr-bg-dark:        #0D1117;
  --clr-surface:        #ffffff;
  --clr-text:           #1E2228;
  --clr-text-muted:     #5A6270;

  /* Spacing scale: 4 / 8 / 16 / 24 / 32 / 48 / 64 */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;

  /* Typography scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.35rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;
  --fs-5xl:  3.75rem;

  /* Fonts */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Manrope', sans-serif;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(13, 17, 23, 0.08);
  --shadow-md:  0 8px 32px rgba(13, 17, 23, 0.12);
  --shadow-lg:  0 20px 60px rgba(13, 17, 23, 0.18);

  /* Layout */
  --max-w: 1200px;
  --nav-h: 122px;

  /* Motion */
  --transition:      0.22s ease;
  --transition-slow: 0.4s ease;
}