/* === REACH: STORM === */
.reach-storm {
  /* === FONT SETUP === */
  font-family: 'Romanesco', cursive;
  
  
}
.reach-storm h1,
.reach-storm h2 {
  font-family: 'New Amsterdam', sans-serif;

}


/* === COLOR VARIABLES === */
.reach-storm {
  --color-main: #1B3669;      /* Primary brand color */
  --color-accent: #D2A146;    /* Secondary/accent color */
  --color-deep: #7A4C2E;      /* For shadows, borders, depth */
  --color-bg: #152A51;        /* Background color */
  --color-text: #D2A146;      /* Default text */
  --color-muted: #121E34;     /* Subtle elements */
  --color-highlight: #D59B2E; /* 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-storm .text-main      { color: var(--color-main); }
.reach-storm .text-accent    { color: var(--color-accent); }
.reach-storm .text-muted     { color: var(--color-muted); }
.reach-storm .text-highlight { color: var(--color-highlight); }

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

.reach-storm .border-main   { border-color: var(--color-main); }
.reach-storm .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>
*/