/* === REACH: SABLE === */
.reach-sable {
  /* === FONT SETUP === */
  font-family: 'Grenze Gotisch', sans-serif;
  
  
}
.reach-sable h1,
.reach-sable h2 {
  font-family: 'Astloch', cursive;

}


/* === COLOR VARIABLES === */
.reach-sable {
  --color-main: #331F0A;      /* Primary brand color */
  --color-accent: #DBA81C;    /* Secondary/accent color */
  --color-deep: #1F1002;      /* For shadows, borders, depth */
  --color-bg: #331F0A;        /* Background color */
  --color-text: #DBA81C;      /* Default text */
  --color-muted: #1F1002;     /* Subtle elements */
  --color-highlight: #DBA81C; /* 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-sable .text-main      { color: var(--color-main); }
.reach-sable .text-accent    { color: var(--color-accent); }
.reach-sable .text-muted     { color: var(--color-muted); }
.reach-sable .text-highlight { color: var(--color-highlight); }

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

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