/* ==========================================================================
   BASE STYLES
   --------------------------------------------------------------------------
   PURPOSE:
   This file defines how RAW HTML ELEMENTS look by default.
   No branding decisions, no layout decisions.

   Base styles should make content:
   - readable
   - accessible
   - predictable

   WHY THIS FILE EXISTS:
   - Normalises browser differences
   - Keeps typography consistent
   - Prevents plugin/editor surprises

   RULES:
   - Target elements only (body, h1, p, a, img)
   - NO layout decisions
   - NO component styling
   - NO section styling

   ASK YOURSELF:
   "If this CSS was removed, would the site still function?"
   If yes → base is correct.

   EXAMPLES OF WHAT BELONGS HERE:
   body font-family
   h1–h6 typography
   default paragraph spacing
   img max-width
   link behaviour

   EXAMPLES OF WHAT DOES NOT BELONG HERE:
   Buttons
   Forms
   Navigation
   Cards
   Grids
   ========================================================================== */

html { font-size: 15px; }

body {
  color: var(--text-main);
  background-color: var(--bg-body);
  font-family: var(--font-body);
  line-height: 1.6;
  font-weight: 300;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, .h6, h6 {
  font-family: var(--font-heading);
  color: var(--brand-secondary);
  /* font-weight: 500; */
font-variation-settings: 'wght' 600; 
  margin-bottom: 1.5rem;
}

p { margin-bottom: 1.5rem; }

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

#content a {
 
  font-weight: 500;
}

a:hover { text-decoration: underline; }

img { max-width: 100% !important; height: auto; }

hr { border-color: var(--brand-secondary) !important; opacity: 1; margin: 0; }