/* 
   LEMM Core Specs - Cyber-Technical Theme 
   Based on Project Talamaska Visuals
*/

/* --- COLOR PALETTES --- */

/* Light Mode (Default) - Clean, Technical, High Contrast */
[data-md-color-scheme="default"] {
    --md-primary-fg-color:        #0891b2; /* Cyan 600 */
    --md-primary-fg-color--light: #06b6d4; /* Cyan 500 */
    --md-primary-fg-color--dark:  #0e7490; /* Cyan 700 */
    --md-accent-fg-color:         #7c3aed; /* Violet 600 */
    
    --lemm-bg-color:              #ffffff;
    --lemm-surface-color:         #f1f5f9; /* Slate 100 */
    --lemm-border-color:          #cbd5e1; /* Slate 300 */
    --lemm-text-color:            #0f172a; /* Slate 900 */
    --lemm-text-muted:            #64748b; /* Slate 500 */
    
    --lemm-card-shadow:           0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --lemm-glow-cyan:             0 0 10px rgba(8, 145, 178, 0.2);
    --lemm-glow-violet:           0 0 10px rgba(124, 58, 237, 0.2);
}

/* Dark Mode (Slate) - Cyber, Deep, Neon Accents */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color:        #06b6d4; /* Cyan 500 */
    --md-primary-fg-color--light: #22d3ee; /* Cyan 400 */
    --md-primary-fg-color--dark:  #0891b2; /* Cyan 600 */
    --md-accent-fg-color:         #8b5cf6; /* Violet 500 */
    
    --lemm-bg-color:              #020617; /* Slate 950 */
    --lemm-surface-color:         #0f172a; /* Slate 900 */
    --lemm-border-color:          #1e293b; /* Slate 800 */
    --lemm-text-color:            #f8fafc; /* Slate 50 */
    --lemm-text-muted:            #94a3b8; /* Slate 400 */
    
    --lemm-card-shadow:           0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --lemm-glow-cyan:             0 0 15px rgba(6, 182, 212, 0.3);
    --lemm-glow-violet:           0 0 15px rgba(139, 92, 246, 0.3);
}

/* --- GLOBAL OVERRIDES --- */

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--lemm-bg-color);
}
::-webkit-scrollbar-thumb {
    background: var(--md-primary-fg-color--dark);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--md-accent-fg-color);
}

/* --- COMPONENTS --- */

/* 1. Gradient Text Headers */
.text-gradient {
    background: linear-gradient(to right, var(--md-primary-fg-color), var(--md-accent-fg-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* 2. Epic Card (Admonition Variant) */
.md-typeset .admonition.epic {
    border-left-width: 0;
    border-top: 4px solid var(--md-accent-fg-color);
    background-color: var(--lemm-surface-color);
    box-shadow: var(--lemm-card-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.md-typeset .admonition.epic:hover {
    transform: translateY(-2px);
    box-shadow: var(--lemm-card-shadow), var(--lemm-glow-violet);
}

.md-typeset .admonition.epic .admonition-title {
    background-color: transparent;
    border-bottom: 1px solid var(--lemm-border-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-accent-fg-color);
}

/* 3. Tech Spec Card (Admonition Variant) */
.md-typeset .admonition.tech-spec {
    border-left-width: 0;
    border: 1px solid var(--md-primary-fg-color);
    background-color: rgba(6, 182, 212, 0.05); /* Very subtle cyan tint */
}

.md-typeset .admonition.tech-spec .admonition-title {
    background-color: var(--md-primary-fg-color);
    color: #ffffff; /* Always white text on the header */
    font-family: "Fira Code", monospace;
    font-size: 0.85em;
}

.md-typeset .admonition.tech-spec .admonition-content {
    font-family: "Fira Code", monospace;
    font-size: 0.9em;
}

/* 4. Flow Arrow */
.flow-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    color: var(--md-primary-fg-color);
    font-size: 1.5rem;
    opacity: 0.8;
}
.flow-arrow::after {
    content: "▼";
}
@media (min-width: 76.1875em) { /* Desktop breakpoint */
    .flow-arrow.horizontal::after {
        content: "▶";
    }
}

/* 5. Piano Roll Visualization */
.piano-roll {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 2px;
    height: 150px;
    width: 100%;
    background-color: var(--lemm-surface-color);
    padding: 4px;
    border: 1px solid var(--lemm-border-color);
    border-radius: 4px;
    margin: 1em 0;
}

.piano-cell {
    background-color: var(--lemm-border-color);
    opacity: 0.3;
    border-radius: 1px;
}

.piano-note {
    background-color: var(--md-primary-fg-color);
    box-shadow: var(--lemm-glow-cyan);
    opacity: 1;
    border-radius: 2px;
}

.piano-note.long {
    grid-column: span 2;
    background-color: var(--md-accent-fg-color);
    box-shadow: var(--lemm-glow-violet);
}