/* === REACH: CRIMSON === */


/* === COLOR VARIABLES === */
.reach-crimson {
  --reach-primary: #CCC5B9;      /* Primary brand color */
  --reach-accent: #EB4C28;    /* Secondary/accent color */
  --reach-deep: #403D39;      /* For shadows, borders, depth */
  --reach-light: #E7A355;
  --reach-background: #3A0808;        /* Background color */
  --reach-text: #CCC5B9;      /* Default text */
  --reach-muted: #DBAF6E;     /* Subtle elements */
  --reach-highlight: #6E1A08; /* Flashy detail (optional) */

   /* === FONTS === */
    --reach-font-heading: 'Audiowide', sans-serif;
    --reach-font-body: 'Lacquer', sans-serif;
    --reach-font-decorative: 'Audiowide', sans-serif;
    
    background-color: var(--reach-background);
    color: var(--reach-text);
}


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

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

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

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

/* === CRIMSON-SPECIFIC COMPONENT TWEAKS === */

/* Dragon wax seals */
.reach-crimson .wax-seal::after {
    content: "☄️";
}

   /* Crimson: Crystalline shattered edges */
        .reach-crimson .artifact-frame.style-torn {
            position: relative;
            clip-path: polygon(0% 0%, 85% 0%, 90% 8%, 95% 2%, 100% 12%, 92% 25%, 100% 35%, 88% 48%, 100% 55%, 85% 68%, 95% 78%, 100% 88%, 90% 95%, 85% 100%, 15% 100%, 10% 95%, 0% 88%, 8% 78%, 0% 68%, 12% 55%, 0% 48%, 15% 35%, 0% 25%, 8% 12%, 0% 2%, 5% 8%, 10% 0%);
        }
     .reach-crimson .artifact-frame.style-torn::after {
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            background: linear-gradient(45deg, var(--reach-accent) 0%, var(--reach-highlight) 50%, transparent 100%);
            z-index: -1;
            opacity: 0.4;
            filter: blur(5px);
        }

   /* Crimson: Mineral vein watermarks */
        .reach-crimson .watermark {
            background: 
                linear-gradient(45deg, var(--reach-accent) 1px, transparent 1px),
                linear-gradient(-45deg, var(--reach-highlight) 1px, transparent 1px),
                linear-gradient(135deg, var(--reach-accent) 1px, transparent 1px);
            background-size: 20px 20px, 15px 15px, 25px 25px;
            opacity: 0.2;
            animation: mineral-pulse 3s ease-in-out infinite;
        }

   @keyframes mineral-pulse {
            0%, 100% { opacity: 0.2; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(1.05); }
        }


/* Fiery ritual circles */
.reach-crimson .ritual-circle::after {
    content: "🔥";
    animation: spin 15s linear infinite, ember-glow 1s 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>
*/