/* === REACH: IVORY === */
.reach-ivory {
  /* === FONT SETUP === */
  font-family: 'Rubik Iso', sans-serif;
  
  
}
.reach-ivory h1,
.reach-ivory h2 {
  font-family: 'Babylonica', cursive;

}


/* === COLOR VARIABLES === */
.reach-ivory {
  --color-main: #FEF5E5;      /* Primary brand color */
  --color-accent: #B0B3C0;    /* Secondary/accent color */
  --color-deep: #D7CCB4;      /* For shadows, borders, depth */
  --color-bg: #FEF5E5;        /* Background color */
  --color-text: #1D1A14;      /* Default text */
  --color-muted: #B4AA97;     /* Subtle elements */
  --color-highlight: #B4ADC2; /* 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-ivory .text-main      { color: var(--color-main); }
.reach-ivory .text-accent    { color: var(--color-accent); }
.reach-ivory .text-muted     { color: var(--color-muted); }
.reach-ivory .text-highlight { color: var(--color-highlight); }

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

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