/* ============================================================
   Standard breakpoints (mobile-first). Use these across all
   site CSS instead of ad-hoc values:
     max-width:  479px  (mobile)
     min-width:  480px  (large mobile / small tablet)
     max-width:  767px  (mobile + large mobile, paired below)
     min-width:  768px  (tablet)
     max-width: 1023px  (tablet, paired below)
     min-width: 1024px  (desktop)
     min-width: 1280px  (large desktop)
   group.css (minified legacy site-builder export) is excluded —
   left as-is, don't hand-edit its breakpoints.
   ============================================================ */

:root {
  /* Typography — from scraped Google Fonts */
  --font-heading: 'Barlow', sans-serif;
  --font-body: 'Quicksand', sans-serif;
  --fs-h1: 2rem;
  --fs-h2: 2rem;
  --fs-h3: 1.75rem;
  --fs-body: 1rem;
  --fw-heading: 400;
  --fw-body: 400;
  --fs-hero: 2.625rem;
  --fw-hero: 700;

  /* Template layout */
  --hero-height: 600px;

  /* Navigation colours */
  --nav-text: #000000;
  --nav-hover-text: #FFC200;
  --nav-dropdown-bg: #ffffff;
  --nav-dropdown-text: #33373d;
  --nav-dropdown-hover-bg: #f5f5f5;
  --nav-dropdown-hover-text: #FFC200;

  /* Spacing scale — use these instead of ad-hoc px/rem values for padding,
     margin, and gap. Steps are evidence-based: derived from a sitewide
     frequency count of every existing padding/margin/gap value (2026-09-04),
     not picked in advance — 4/8/12/16/20/24/32/40/48px each already had
     24-108 independent uses before this scale existed, so adopting a step
     on an existing rule is usually a value-for-value swap, not a re-tune.
     --space-1   4px   hairline — icon-to-label, fine alignment
     --space-2   8px   tight internal padding
     --space-3  12px   compact text/element spacing
     --space-4  16px   default text spacing
     --space-5  20px   heading-band padding (the single most common value
                       sitewide — this is not a stray, it's the norm)
     --space-6  24px   between related elements
     --space-7  32px   between distinct blocks within a section
     --space-8  40px   generous internal spacing
     --space-9  48px   section internal top/bottom padding
     --space-10 64px   between major page sections, where visual separation
                       (not just a background-colour change) is wanted */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Spacing — from scraped computed styles */
  --section-padding: 80px;
  --container-max: 1400px;
  --border-radius: 4px;
  --shadow: 0 2px 8px rgba(0,0,0,0.12);
  --transition: 0.3s ease;

  /* Bell Group / Mining colours */
  --color-primary: #FFC200;
  --color-secondary: #1A1A1A;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-bg: #FFFFFF;
  --color-bg-light: #F5F5F5;
  --color-border: #E0E0E0;
  --color-white: #FFFFFF;
  --color-black: #1A1A1A;
}

@media (max-width: 767px) {
  :root {
    --section-padding: 40px;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;
  }
}