/* Parametrix web design tokens — for HTML deliverables (dashboards, tools, report web views).
   Fonts and colours mirror the live parametrix.com (Astra/Elementor) so output matches the
   public brand. Office documents use a different, brand-guide stack (see TYPOGRAPHY.md). */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;800&family=Roboto+Slab:wght@600;700&family=Merriweather:wght@400;700&display=swap');

:root {
  /* Type — web stack (Office stack is Rockwell / Franklin Gothic / Georgia) */
  --pmx-font-headline: 'Roboto Slab', Georgia, serif;     /* print equiv: Klinic Slab */
  --pmx-font-body:     'Assistant', 'Segoe UI', sans-serif;/* print equiv: Franklin Gothic */
  --pmx-font-accent:   'Merriweather', Georgia, serif;     /* print equiv: Freight Text Pro */

  /* Primary (~72% of any layout) */
  --pmx-red:          #EE3D24;
  --pmx-charcoal:     #333333;
  --pmx-medium-gray:  #676768;
  --pmx-white:        #FFFFFF;
  --pmx-off-white:    #F9FAFB;  /* site surface tint */

  /* Secondary accents (~12%) — also the sector palette, see SKILL.md */
  --pmx-orange:       #F36E21;  /* Progress  / Community */
  --pmx-yellow:       #FCC214;  /* Optimistic / Transportation */
  --pmx-green:        #3FB549;  /* Future     / Environmental */
  --pmx-blue:         #0073BB;  /* Clean      / Water + links */

  /* Tertiary (~16%) — charts, muted fills, sparingly */
  --pmx-calm-red:     #ED715D;
  --pmx-calm-orange:  #F89957;
  --pmx-calm-blue:    #B2D3DB;
  --pmx-calm-yellow:  #F4E39C;
  --pmx-gray-1:       #B3B4B5;
  --pmx-gray-2:       #DBDDDC;
  --pmx-gray-3:       #E5E5E5;
  --pmx-gray-4:       #F2F2F2;

  /* Conventions read off the live site */
  --pmx-link:         #0073BB;  /* Clean Blue links */
  --pmx-selection:    #EE3D24;  /* red text selection */
}

/* Base usage */
body { font-family: var(--pmx-font-body); color: var(--pmx-charcoal); }
h1,h2,h3,h4,h6 { font-family: var(--pmx-font-headline); font-weight: 700; color: var(--pmx-charcoal); }
h5 { font-family: var(--pmx-font-body); font-weight: 600; text-transform: uppercase; } /* site convention */
blockquote, .pmx-accent { font-family: var(--pmx-font-accent); }
a { color: var(--pmx-link); text-decoration: none; }
::selection { background: var(--pmx-selection); color: #fff; }

/* Ordered series palette for charts (primary → secondary, de-emphasise with grays) */
/* 1 red  2 charcoal  3 orange  4 blue  5 green  6 yellow */