/* Powell Plumbing design tokens.
   Every colour, font, size and spacing value on the site comes from here.
   BRAND.md records the reasoning; this file enforces it.
   Palette is FINAL: sampled from the logo artwork on 5 Sep 2026 (BRAND.md, Colours). */

:root {
  /* Colour (FINAL, sampled from logo artwork 5 Sep 2026) */
  --colour-primary: #111111;        /* near-black from the logo: header text, footer, borders, dark panels */
  --colour-primary-dark: #000000;   /* footer bottom strip */
  --colour-brand: #5D8DB9;          /* exact logo blue. Large headings (24px+) and rules ONLY: ~3.3:1 on white */
  --colour-brand-dark: #3A6A99;     /* darkened logo blue, ~5.2:1 on white: links, small headings, text-sized use */
  --colour-accent: #F26B1D;         /* safety orange: Call/Text buttons, sticky bar, one CTA per screen */
  --colour-accent-dark: #C9520C;    /* accent hover/active */
  --colour-bg: #FFFFFF;             /* page background */
  --colour-text: #1A1A1A;           /* body text */
  --colour-muted: #5C6470;          /* secondary text, captions */
  --colour-panel: #F3F5F8;          /* cool light grey panel that sits with the blue */
  --colour-line: #D3D8DE;           /* borders and dividers on white */
  --colour-line-dark: #333333;      /* borders on black */
  --colour-on-primary: #FFFFFF;     /* text on black */
  --colour-on-accent: #111111;      /* text on orange (white fails contrast) */
  --colour-success: #1E6B3A;
  --colour-error: #B3261E;

  /* Type */
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Barlow Condensed", "Arial Narrow", "Barlow", sans-serif;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.0625rem; /* 17px */
  --fs-md: 1.1875rem;   /* 19px */
  --fs-lg: 1.5rem;      /* 24px */
  --fs-xl: 2rem;        /* 32px */
  --fs-2xl: 2.75rem;    /* 44px */
  --fs-3xl: 3.5rem;     /* 56px */
  --fs-4xl: 4.75rem;    /* 76px */

  --lh-tight: 0.95;
  --lh-heading: 1.1;
  --lh-body: 1.5;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Shape. Rectangular on purpose; 2px is the maximum radius anywhere. */
  --radius: 2px;
  --border-w: 2px;
  --rule-w: 4px;

  /* Layout */
  --wrap: 72rem;     /* 1152px content width */
  --measure: 44rem;  /* max line length for prose */
  --gutter: 1rem;
  --sticky-bar-h: 3.75rem;
  --logo-h: 44px;    /* logo is 4.91:1; size by height */
}

@media (min-width: 40em) {
  :root {
    --gutter: 1.5rem;
    --logo-h: 56px;
  }
}