/* === REACH: LUMEN === */
.reach-lumen {
    /* === COLORS === */
    --reach-primary: #281650;
    --reach-accent: #A083CB;
    --reach-light: #ECE4FF;
    --reach-background: #281650;
    --reach-text: #ECE4FF;
    --reach-muted: #584063;
    --reach-highlight: #FFC6FC;
    
    /* === FONTS === */
    --reach-font-heading: 'Dynalight', cursive;
    --reach-font-body: 'Josefin Sans', sans-serif;
    --reach-font-decorative: 'Dynalight', cursive;
    
    background-color: var(--reach-background);
    color: var(--reach-text);
}


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

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

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

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

/* === LUMEN-SPECIFIC COMPONENT TWEAKS === */

/* Crystal wax seals */
.reach-lumen .wax-seal::after {
    content: "✨";
    filter: hue-rotate(280deg);
}

/* Shimmering borders instead of torn edges */
.reach-lumen .artifact-frame.style-torn {
    background: linear-gradient(45deg, var(--reach-light) 0%, var(--reach-background) 100%);
    border: 2px solid var(--reach-accent);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    clip-path: none; /* Override the torn clip-path */
}

.reach-lumen .artifact-frame.style-torn::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--reach-highlight), var(--reach-accent), var(--reach-highlight));
    z-index: -1;
    border-radius: 15px;
    animation: shimmer-border 3s ease-in-out infinite;
}

@keyframes shimmer-border {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Constellation watermarks */
.reach-lumen .watermark {
    background: radial-gradient(circle, var(--reach-highlight) 1px, transparent 1px),
                radial-gradient(circle at 20px 20px, var(--reach-highlight) 1px, transparent 1px),
                radial-gradient(circle at 40px 10px, var(--reach-highlight) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

/* Magical ritual circles */
.reach-lumen .ritual-circle::after {
    content: "✦";
    animation: spin 20s linear infinite, twinkle 2s ease-in-out 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>
*/