/* =============================================================================
   01-variables.css — design tokens
   Colours, font families, @font-face. Loads first: everything else reads these.
   ============================================================================= */

:root {
	/* Brand colours — one per section of the site */
	--js-purple: #9358a3;   /* Agency             */
	--js-blue:   #0eb4ab;   /* Advice & Resources */
	--js-orange: #f15f48;   /* Events & Workshops */
	--js-yellow: #f0b41d;   /* Jobs Board         */

	/* Neutrals */
	--js-grey:  #575b5c;    /* body text, outlines      */
	--js-beige: #fbf6ef;    /* page/panel backgrounds   */
	--js-black: #000000;
	--js-white: #ffffff;

	/* Pale tints — soft backgrounds of each brand colour */
	--js-purple-tint: #f3e9f6;
	--js-blue-tint:   #e3f7f5;
	--js-orange-tint: #f7dfd8;
	--js-yellow-tint: #fdf1d6;
	--js-grey-tint:   #bdc4c6;
	--js-beige-tint:  #f2f1f0;

	/* "Ink" tints — a brand colour darkened enough to use as TEXT.
	   --js-blue on white is only ~2.6:1, under the 4.5:1 WCAG AA needs for body
	   text. Same hue at 5.2:1. Rule of thumb: fills use the bright colour,
	   labels use the ink. */
	--js-blue-ink:   #0a7a74;
	--js-purple-ink: #6f3f7d;
	--js-orange-ink: #c73f2a;
	--js-yellow-ink: #96700a;

	/* Typefaces. Named tokens so a font swap is one edit, not 200. */
	--js-font: "effraregular", Arial, sans-serif;
	--js-font-bold: "effrabold", Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
   UNITS USED IN THIS THEME
   rem   font sizes and most spacing. 1rem = 16px = the browser's default text
         size, so a visitor who enlarges text gets a layout that grows with it.
   px    hairlines, radii, shadows and anything that should NOT scale with text.
   %     widths inside a parent.
   vw    only inside clamp(), to make headings grow with the viewport.
   No line-height carries a unit: "1.3" means 1.3 × this element's own font
   size, so it can never be shorter than the text it wraps.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   FONTS — Effra, the JobShop brand typeface
   url() resolves against THIS file, not the theme root, hence "../fonts/".
   font-display: swap shows fallback text immediately rather than leaving
   headings invisible while the font downloads.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "effraregular";
	src: url("../fonts/effra_std_rg-webfont.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "effrabold";
	src: url("../fonts/effra_std_bd-webfont.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}