/* ═══════════════════════════════════════════════════════════════════════════
   MUSEO DELLE VOCI ARTIFICIALI
   Theme: Cyan — Synthetic/Digital Theme
   ═══════════════════════════════════════════════════════════════════════════

   Used for:
   - Syntetica (all chapters)

   Color palette inspired by digital/synthetic aesthetics:
   - Vivid cyan as primary accent
   - Dark backgrounds with electric highlights
   - Sharp, technological feel

   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="cyan"],
.theme-cyan {
    /* ─── Primary Accent ─── */
    --accent: #00d4d4;
    --accent-light: #4de8e8;
    --accent-dark: #00a3a3;
    --accent-glow: rgba(0, 212, 212, 0.15);
    --accent-dim: rgba(0, 212, 212, 0.4);

    /* ─── Synthetic Colors ─── */
    --ciano-vivo: #00d4d4;
    --ciano-elettrico: #00ffff;
    --ciano-scuro: #007a7a;

    /* ─── Borders ─── */
    --border-color: rgba(0, 212, 212, 0.2);
    --border-hover: rgba(0, 212, 212, 0.5);
    --border-subtle: rgba(0, 212, 212, 0.08);

    /* ─── Shadows ─── */
    --shadow-glow: 0 0 20px rgba(0, 212, 212, 0.15);
    --shadow-accent: 0 4px 20px rgba(0, 212, 212, 0.2);

    /* ─── Backgrounds ─── */
    --bg-primary: #0a0a0a;
    --bg-elevated: #111111;
    --bg-card: #1a1a1a;

    /* ─── Day Mode (Light) Colors ─── */
    --day-bg: #f0fafa;
    --day-bg-elevated: #ffffff;
    --day-text: #0a0a0a;
    --day-text-muted: rgba(10, 10, 10, 0.7);
    --day-accent: #00a3a3;
    --day-border: rgba(0, 163, 163, 0.2);
}

/* ═══════════════════════════════════════════
   CYAN THEME — Header Overrides
   ═══════════════════════════════════════════ */

/* Header with subtle cyan glow */
.theme-cyan .museo-header,
[data-theme="cyan"] .museo-header {
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.96) 0%,
        rgba(8, 12, 12, 0.92) 100%
    );
    border-bottom-color: rgba(0, 212, 212, 0.15);
}

/* Logo diamond with cyan glow */
.theme-cyan .museo-header__logo-diamond,
[data-theme="cyan"] .museo-header__logo-diamond {
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

.theme-cyan .museo-header__logo-diamond::before,
[data-theme="cyan"] .museo-header__logo-diamond::before {
    background: var(--accent);
}

/* Logo text */
.theme-cyan .museo-header__logo-text,
[data-theme="cyan"] .museo-header__logo-text {
    color: var(--accent);
}

/* Back button */
.theme-cyan .museo-header__back,
[data-theme="cyan"] .museo-header__back {
    border-color: rgba(0, 212, 212, 0.2);
    background: rgba(0, 212, 212, 0.04);
}

.theme-cyan .museo-header__back:hover,
[data-theme="cyan"] .museo-header__back:hover {
    color: var(--accent);
    border-color: rgba(0, 212, 212, 0.4);
    background: rgba(0, 212, 212, 0.1);
}

/* Language switcher */
.theme-cyan .museo-header__lang,
[data-theme="cyan"] .museo-header__lang {
    background: rgba(0, 212, 212, 0.06);
    border-color: rgba(0, 212, 212, 0.15);
}

.theme-cyan .museo-header__lang-btn.active,
[data-theme="cyan"] .museo-header__lang-btn.active {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: #0a0a0a;
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* Controls */
.theme-cyan .museo-header__audio-btn,
.theme-cyan .museo-header__account-btn,
.theme-cyan .museo-header__theme-toggle,
[data-theme="cyan"] .museo-header__audio-btn,
[data-theme="cyan"] .museo-header__account-btn,
[data-theme="cyan"] .museo-header__theme-toggle {
    border-color: rgba(0, 212, 212, 0.2);
}

.theme-cyan .museo-header__audio-btn:hover,
.theme-cyan .museo-header__account-btn:hover,
.theme-cyan .museo-header__theme-toggle:hover,
[data-theme="cyan"] .museo-header__audio-btn:hover,
[data-theme="cyan"] .museo-header__account-btn:hover,
[data-theme="cyan"] .museo-header__theme-toggle:hover {
    color: var(--accent);
    border-color: rgba(0, 212, 212, 0.4);
    background: rgba(0, 212, 212, 0.08);
}

.theme-cyan .museo-header__audio-btn.playing,
[data-theme="cyan"] .museo-header__audio-btn.playing {
    color: var(--accent);
    border-color: var(--accent);
}

/* Font controls */
.theme-cyan .museo-header__font-controls,
[data-theme="cyan"] .museo-header__font-controls {
    background: rgba(0, 212, 212, 0.06);
    border-color: rgba(0, 212, 212, 0.15);
}

.theme-cyan .museo-header__font-divider,
[data-theme="cyan"] .museo-header__font-divider {
    background: rgba(0, 212, 212, 0.2);
}

/* ═══════════════════════════════════════════
   CYAN THEME — Footer Overrides
   ═══════════════════════════════════════════ */
.theme-cyan .site-footer__bar,
[data-theme="cyan"] .site-footer__bar {
    background: rgba(10, 10, 10, 0.85);
    border-top-color: rgba(0, 212, 212, 0.2);
}

.theme-cyan .site-footer__bar:hover,
[data-theme="cyan"] .site-footer__bar:hover {
    background: rgba(10, 10, 10, 0.95);
    border-top-color: rgba(0, 212, 212, 0.4);
}

.theme-cyan .site-footer__toggle,
[data-theme="cyan"] .site-footer__toggle {
    color: var(--accent);
}

.theme-cyan .site-footer__expanded,
[data-theme="cyan"] .site-footer__expanded {
    background: rgba(10, 10, 10, 0.95);
}

.theme-cyan .site-footer__content,
[data-theme="cyan"] .site-footer__content {
    border-top-color: rgba(0, 212, 212, 0.1);
}

.theme-cyan .site-footer__brand,
[data-theme="cyan"] .site-footer__brand {
    border-right-color: rgba(0, 212, 212, 0.08);
}

.theme-cyan .site-footer__symbol,
[data-theme="cyan"] .site-footer__symbol {
    color: var(--accent);
}

.theme-cyan .site-footer__column h4,
[data-theme="cyan"] .site-footer__column h4 {
    color: var(--accent);
}

.theme-cyan .site-footer__column a:hover,
[data-theme="cyan"] .site-footer__column a:hover {
    color: var(--accent);
}

/* ═══════════════════════════════════════════
   CYAN THEME — Day Mode
   ═══════════════════════════════════════════ */
.theme-cyan .museo-header--day,
[data-theme="cyan"] .museo-header--day {
    background: linear-gradient(
        180deg,
        rgba(240, 250, 250, 0.98) 0%,
        rgba(230, 247, 247, 0.95) 100%
    );
    border-bottom-color: rgba(0, 163, 163, 0.15);
}

.theme-cyan .museo-header--day .museo-header__logo-text,
[data-theme="cyan"] .museo-header--day .museo-header__logo-text {
    color: var(--day-accent);
}

.theme-cyan .museo-header--day .museo-header__logo-diamond,
[data-theme="cyan"] .museo-header--day .museo-header__logo-diamond {
    border-color: var(--day-accent);
}

.theme-cyan .museo-header--day .museo-header__logo-diamond::before,
[data-theme="cyan"] .museo-header--day .museo-header__logo-diamond::before {
    background: var(--day-accent);
}

.theme-cyan .museo-header--day .museo-header__back:hover,
[data-theme="cyan"] .museo-header--day .museo-header__back:hover {
    color: var(--day-accent);
}

/* ═══════════════════════════════════════════
   CYAN THEME — General Overrides
   ═══════════════════════════════════════════ */
.theme-cyan a:hover,
[data-theme="cyan"] a:hover {
    color: var(--accent);
}

.theme-cyan ::selection,
[data-theme="cyan"] ::selection {
    background: var(--accent);
    color: #0a0a0a;
}

/* Scrollbar with cyan accent */
.theme-cyan ::-webkit-scrollbar-thumb,
[data-theme="cyan"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 212, 0.3);
}

.theme-cyan ::-webkit-scrollbar-thumb:hover,
[data-theme="cyan"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 212, 0.5);
}