/* === REACH: EMERALD === */
.reach-emerald {
    /* === COLORS === */
    --reach-primary: #9CB996;
    --reach-accent: #5A9351;
    --reach-light: #9cb996;
    --reach-deep: #146424;  
    --reach-background: #124e26;
    --reach-text: #ECB95B;
    --reach-muted: #224C2A;
    --reach-highlight: #FFCAD4;
    
    /* === FONTS === */
    --reach-font-heading: 'Cinzel', serif;
    --reach-font-body: 'Cinzel', serif;
    --reach-font-decorative: 'Fleur De Leah', cursive;
    
    background-color: var(--reach-background);
    color: var(--reach-text);
}




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

.reach-emerald .text-primary      { color: var(--reach-primary); }
.reach-emerald .text-accent    { color: var(--reach-accent); }
.reach-emerald .text-muted     { color: var(--reach-muted); }
.reach-emerald .text-highlight { color: var(--reach-highlight); }

.reach-emerald .background-primary      { background-color: var(--reach-primary); color: white; }
.reach-emerald .background-accent    { background-color: var(--reach-accent); color: black; }
.reach-emerald .background-muted     { background-color: var(--reach-muted); color: black; }
.reach-emerald .background-highlight { background-color: var(--reach-highlight); color: black; }

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

/* === EMERALD-SPECIFIC COMPONENT TWEAKS === */

/* Leaf wax seals */
.reach-emerald .wax-seal::after {
    content: "🍃";
}

/* Vine-wrapped borders */
.reach-emerald .artifact-frame.style-torn {
    border: 2px solid var(--reach-accent);
    border-radius: 20px;
    position: relative;
    clip-path: none; /* Override torn effect */
}

.reach-emerald .artifact-frame.style-torn::before {
    content: "🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    font-size: 12px;
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
    word-wrap: break-word;
    line-height: 1;
}

/* Moss watermarks */
.reach-emerald .watermark {
    background: 
        radial-gradient(ellipse, var(--reach-accent) 20%, transparent 40%),
        radial-gradient(ellipse at 30px 20px, var(--reach-highlight) 15%, transparent 35%),
        radial-gradient(ellipse at 60px 40px, var(--reach-accent) 25%, transparent 45%);
    opacity: 0.15;
    border-radius: 50px;
}

/* Nature ritual circles */
.reach-emerald .ritual-circle::after {
    content: "🌱";
    animation: spin 25s linear infinite;
}

/* === 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>
*/