/* Design tokens extracted from circularsourcing.world's production theme
   (wp-content/themes/circular-sourcing-new-theme/assets/css/style.css).
   All component CSS should reference these variables — no hardcoded
   colours/fonts/radii in base.css or templates. */

:root {
  /* Colours */
  --cs-white: #ffffff;
  --cs-black: #000000;
  --cs-cotton: #efeee5;
  --cs-cotton-light: #f8f7f2;
  --cs-dark-green: #3e4935;
  --cs-accent-blue: #6b4eff;
  --cs-grey-300: #5c5c5c;
  --cs-grey-200: #a8a8a8;
  --cs-grey-100: #e3e5e5;
  --cs-grey-text: #525252;

  /* Type */
  --cs-font-body: "Scto Grotesk A", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cs-line-height: 1.35;

  /* Live-site h1/h2/h3 run up to 83px/55px/40px for full-bleed marketing
     heroes. This app's pages are smaller/functional, so the scale below
     keeps the same family/weight/casing but tops out lower. */
  --cs-h1-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  --cs-h2-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
  --cs-h3-size: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);

  /* Shape */
  --cs-radius: 0px;
  --cs-radius-pill: 999px;

  /* Buttons — matches .btn-primary on the live site */
  --cs-btn-padding: 15px 35px;
}