/* === REACH: THORN === */
.reach-thorn {
  /* === FONT SETUP === */
  font-family: 'Indie Flower', sans-serif;
  
  
}
.reach-thorn h1,
.reach-thorn h2 {
  font-family: 'Henny Penny', serif;

}


/* === COLOR VARIABLES === */
.reach-thorn {
  --color-main: #22361B;      /* Primary brand color */
  --color-accent: #A41B34;    /* Secondary/accent color */
  --color-deep: #22361B;      /* For shadows, borders, depth */
  --color-bg: #2D4824;        /* Background color */
  --color-text: #8EA576;      /* Default text */
  --color-muted: #5D325F;     /* Subtle elements */
  --color-highlight: #891772; /* 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-thorn .text-main      { color: var(--color-main); }
.reach-thorn .text-accent    { color: var(--color-accent); }
.reach-thorn .text-muted     { color: var(--color-muted); }
.reach-thorn .text-highlight { color: var(--color-highlight); }

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

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