/* === REACH: IRON === */
.reach-iron {
  /* === FONT SETUP === */
  font-family: 'Russo One', sans-serif;
  
  
}
.reach-iron h1,
.reach-iron h2 {
  font-family: 'Metal Mania', serif;

}


/* === COLOR VARIABLES === */
.reach-iron {
  --color-main: #A5AEC0;      /* Primary brand color */
  --color-accent: #98A1B4;    /* Secondary/accent color */
  --color-deep: #6D7289;      /* For shadows, borders, depth */
  --color-bg: #A4AABF;        /* Background color */
  --color-text: #333748;      /* Default text */
  --color-muted: #81939C;     /* Subtle elements */
  --color-highlight: #181C2A; /* Flashy detail (optional) */

  background-color: var(--color-bg);
  color: var(--color-text);
}


/* === OPTIONAL UTILITY CLASSES === */
/* These make it easier to style directly in HTML */

.reach-iron .text-main      { color: var(--color-main); }
.reach-iron .text-accent    { color: var(--color-accent); }
.reach-iron .text-muted     { color: var(--color-muted); }
.reach-iron .text-highlight { color: var(--color-highlight); }

.reach-iron .bg-main      { background-color: var(--color-main); color: white; }
.reach-iron .bg-accent    { background-color: var(--color-accent); color: black; }
.reach-iron .bg-muted     { background-color: var(--color-muted); color: black; }
.reach-iron .bg-highlight { background-color: var(--color-highlight); color: black; }

.reach-iron .border-main   { border-color: var(--color-main); }
.reach-iron .border-accent { border-color: var(--color-accent); }


/* === EXAMPLES === */
/*
<div class="reach-REACHNAME">
  <h1 class="text-main">Title</h1>
  <p class="text-muted">Subtle info here</p>
  <button class="bg-accent">Click me</button>
</div>
*/