/* ─────────────────────────────────────────────────────────────
   TV-tema-katalog - delt mellem tv.html, canvas-concept og admin
   Hver [data-theme="X"] sætter CSS-variable som tv-rendering
   bruger til at male sig selv.

   Dual-vocabulary: hvert tema sætter BÅDE
   - tv.html-vars (--green, --yellow, --text, --text2, --grid)
   - canvas-concept-vars (--accent, --text-1, --text-2, --text-3,
     --bg-2, --bg-3, --card, --card-2, --border, --border-2)
   så samme tema-attribut virker i begge render-pipelines.

   VIGTIGT: dark + light er IKKE defineret her - de defineres native
   i hver pipeline (tv.html har sin egen palette, canvas-concept sin)
   så vi ikke override'er hver sides default-tema. Her er KUN de 7
   nye custom-temaer som begge sider tilbyder via dropdown.
   ───────────────────────────────────────────────────────────── */

/* ═══ BØRNS VILKÅR - warm coral red (#E4002B), soft cream, heart energy ═══ */
[data-theme="bv"]{
  /* tv.html vocab */
  --bg:#1a0810;--card:rgba(228,0,43,.04);--border:rgba(228,0,43,.12);--green:#E4002B;--yellow:#FFB81C;--amber:#F26522;--red:#C8102E;--blue:#E4002B;--text:#fff;--text2:rgba(255,255,255,.35);--grid:rgba(228,0,43,.015);--mvp-bg:linear-gradient(135deg,rgba(228,0,43,.1),rgba(255,184,28,.05));--mvp-bdr:rgba(228,0,43,.25);--bg-anim:bv-pulse;
  /* canvas-concept vocab */
  --bg-2:#22101a;--bg-3:#1f0e16;--card-2:rgba(228,0,43,.07);--card-3:rgba(228,0,43,.1);--border-2:rgba(228,0,43,.2);--border-3:rgba(228,0,43,.32);--text-1:#fff;--text-2:rgba(255,255,255,.7);--text-3:rgba(255,255,255,.45);--accent:#E4002B;--accent-2:#B8001F;--accent-glow:rgba(228,0,43,.4);
}
@keyframes bv-pulse{0%,100%{background:radial-gradient(ellipse at 20% 80%,rgba(228,0,43,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(255,184,28,.04) 0%,transparent 50%),#1a0810}50%{background:radial-gradient(ellipse at 30% 70%,rgba(228,0,43,.1) 0%,transparent 60%),radial-gradient(ellipse at 70% 30%,rgba(255,184,28,.06) 0%,transparent 50%),#1a0810}}

/* ═══ CYBERPUNK - electric purple/cyan with scanlines ═══ */
[data-theme="neon"]{
  --bg:#0a0018;--card:rgba(157,0,255,.05);--border:rgba(0,255,255,.1);--green:#00ffcc;--yellow:#ff00ff;--amber:#9d00ff;--red:#ff003c;--blue:#00d4ff;--text:#e0e0ff;--text2:rgba(200,200,255,.55);--grid:rgba(0,255,255,.015);--mvp-bg:linear-gradient(135deg,rgba(157,0,255,.1),rgba(0,255,204,.05));--mvp-bdr:rgba(0,255,204,.2);--bg-anim:neon-shift;
  --bg-2:#10002a;--bg-3:#0d0022;--card-2:rgba(157,0,255,.08);--card-3:rgba(0,255,255,.06);--border-2:rgba(0,255,255,.18);--border-3:rgba(0,255,255,.3);--text-1:#e0e0ff;--text-2:rgba(200,200,255,.7);--text-3:rgba(200,200,255,.45);--accent:#00ffcc;--accent-2:#00d4ff;--accent-glow:rgba(0,255,204,.5);
}
@keyframes neon-shift{0%,100%{background:radial-gradient(ellipse at 0% 100%,rgba(157,0,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 100% 0%,rgba(0,212,255,.06) 0%,transparent 50%),#0a0018}50%{background:radial-gradient(ellipse at 100% 100%,rgba(157,0,255,.1) 0%,transparent 50%),radial-gradient(ellipse at 0% 0%,rgba(0,212,255,.08) 0%,transparent 50%),#0a0018}}

/* ═══ GOLD RUSH - luxury black & gold with shimmer ═══ */
[data-theme="gold"]{
  --bg:#0c0a04;--card:rgba(212,175,55,.04);--border:rgba(212,175,55,.1);--green:#d4af37;--yellow:#ffd700;--amber:#daa520;--red:#b8860b;--blue:#d4af37;--text:#f5e6c8;--text2:rgba(245,230,200,.55);--grid:rgba(212,175,55,.012);--mvp-bg:linear-gradient(135deg,rgba(255,215,0,.1),rgba(212,175,55,.05));--mvp-bdr:rgba(255,215,0,.25);--bg-anim:gold-shimmer;
  --bg-2:#13100a;--bg-3:#100d07;--card-2:rgba(212,175,55,.07);--card-3:rgba(212,175,55,.1);--border-2:rgba(212,175,55,.2);--border-3:rgba(212,175,55,.32);--text-1:#f5e6c8;--text-2:rgba(245,230,200,.7);--text-3:rgba(245,230,200,.45);--accent:#d4af37;--accent-2:#b8961f;--accent-glow:rgba(212,175,55,.5);
}
@keyframes gold-shimmer{0%,100%{background:radial-gradient(ellipse at 50% 50%,rgba(212,175,55,.04) 0%,transparent 60%),#0c0a04}50%{background:radial-gradient(ellipse at 50% 50%,rgba(212,175,55,.08) 0%,transparent 60%),#0c0a04}}

/* ═══ AURORA - animated northern lights ═══ */
[data-theme="aurora"]{
  --bg:#050814;--card:rgba(100,200,255,.04);--border:rgba(100,200,255,.08);--green:#72efdd;--yellow:#64dfdf;--amber:#48bfe3;--red:#ff6b6b;--blue:#5390d9;--text:#e0f0ff;--text2:rgba(200,230,255,.55);--grid:rgba(100,200,255,.012);--mvp-bg:linear-gradient(135deg,rgba(114,239,221,.08),rgba(83,144,217,.04));--mvp-bdr:rgba(114,239,221,.2);--bg-anim:aurora-flow;
  --bg-2:#0a0e1f;--bg-3:#080b1a;--card-2:rgba(100,200,255,.07);--card-3:rgba(114,239,221,.07);--border-2:rgba(114,239,221,.2);--border-3:rgba(114,239,221,.32);--text-1:#e0f0ff;--text-2:rgba(200,230,255,.7);--text-3:rgba(200,230,255,.45);--accent:#72efdd;--accent-2:#5390d9;--accent-glow:rgba(114,239,221,.45);
}
@keyframes aurora-flow{0%{background:linear-gradient(160deg,#050814 0%,rgba(83,144,217,.06) 30%,rgba(114,239,221,.04) 50%,rgba(100,223,223,.03) 70%,#050814 100%)}33%{background:linear-gradient(160deg,#050814 0%,rgba(114,239,221,.06) 25%,rgba(83,144,217,.05) 50%,rgba(100,223,223,.06) 70%,#050814 100%)}66%{background:linear-gradient(160deg,#050814 0%,rgba(100,223,223,.04) 30%,rgba(114,239,221,.06) 55%,rgba(83,144,217,.04) 75%,#050814 100%)}100%{background:linear-gradient(160deg,#050814 0%,rgba(83,144,217,.06) 30%,rgba(114,239,221,.04) 50%,rgba(100,223,223,.03) 70%,#050814 100%)}}

/* ═══ FIRE - aggressive animated ember glow ═══ */
[data-theme="fire"]{
  --bg:#110800;--card:rgba(255,80,0,.04);--border:rgba(255,120,0,.1);--green:#ff8c00;--yellow:#ffd700;--amber:#ff6600;--red:#ff2200;--blue:#ff9500;--text:#ffe8d0;--text2:rgba(255,232,208,.55);--grid:rgba(255,80,0,.012);--mvp-bg:linear-gradient(135deg,rgba(255,215,0,.1),rgba(255,80,0,.05));--mvp-bdr:rgba(255,140,0,.3);--bg-anim:fire-glow;
  --bg-2:#1a0d00;--bg-3:#160a00;--card-2:rgba(255,80,0,.07);--card-3:rgba(255,140,0,.08);--border-2:rgba(255,140,0,.22);--border-3:rgba(255,140,0,.36);--text-1:#ffe8d0;--text-2:rgba(255,232,208,.7);--text-3:rgba(255,232,208,.45);--accent:#ff8c00;--accent-2:#ff6600;--accent-glow:rgba(255,140,0,.5);
}
@keyframes fire-glow{0%,100%{background:radial-gradient(ellipse at 50% 100%,rgba(255,80,0,.08) 0%,rgba(255,30,0,.03) 40%,transparent 70%),#110800}50%{background:radial-gradient(ellipse at 50% 100%,rgba(255,80,0,.14) 0%,rgba(255,30,0,.06) 40%,transparent 70%),#110800}}

/* ═══ SOLNEDGANG - varm pink/orange/lilla, perfekt til aftenvagter ═══ */
[data-theme="sunset"]{
  --bg:#1a0a14;--card:rgba(255,140,90,.05);--border:rgba(255,120,150,.12);--green:#FF8C5A;--yellow:#FFB37C;--amber:#FF6B9D;--red:#E63946;--blue:#9D4EDD;--text:#fff5ee;--text2:rgba(255,245,238,.5);--grid:rgba(255,140,90,.012);--mvp-bg:linear-gradient(135deg,rgba(255,179,124,.1),rgba(157,78,221,.06));--mvp-bdr:rgba(255,140,90,.3);--bg-anim:sunset-fade;
  --bg-2:#22101b;--bg-3:#1d0d17;--card-2:rgba(255,140,90,.08);--card-3:rgba(157,78,221,.07);--border-2:rgba(255,120,150,.22);--border-3:rgba(255,120,150,.34);--text-1:#fff5ee;--text-2:rgba(255,245,238,.7);--text-3:rgba(255,245,238,.45);--accent:#FF8C5A;--accent-2:#9D4EDD;--accent-glow:rgba(255,140,90,.5);
}
@keyframes sunset-fade{0%,100%{background:radial-gradient(ellipse at 30% 100%,rgba(255,107,157,.08) 0%,transparent 55%),radial-gradient(ellipse at 70% 0%,rgba(157,78,221,.05) 0%,transparent 50%),#1a0a14}50%{background:radial-gradient(ellipse at 70% 100%,rgba(255,140,90,.1) 0%,transparent 55%),radial-gradient(ellipse at 30% 0%,rgba(157,78,221,.07) 0%,transparent 50%),#1a0a14}}

/* ═══ DYBHAV - dyb marineblå med cyan accent, koldt og roligt ═══ */
[data-theme="ocean"]{
  --bg:#021a2e;--card:rgba(64,196,255,.04);--border:rgba(64,196,255,.1);--green:#26C6DA;--yellow:#FFD54F;--amber:#FF8A65;--red:#FF5252;--blue:#40C4FF;--text:#e3f2fd;--text2:rgba(227,242,253,.5);--grid:rgba(64,196,255,.015);--mvp-bg:linear-gradient(135deg,rgba(38,198,218,.08),rgba(64,196,255,.04));--mvp-bdr:rgba(38,198,218,.25);--bg-anim:ocean-tide;
  --bg-2:#06223a;--bg-3:#031c33;--card-2:rgba(64,196,255,.07);--card-3:rgba(38,198,218,.07);--border-2:rgba(64,196,255,.2);--border-3:rgba(64,196,255,.32);--text-1:#e3f2fd;--text-2:rgba(227,242,253,.7);--text-3:rgba(227,242,253,.45);--accent:#26C6DA;--accent-2:#0891b2;--accent-glow:rgba(38,198,218,.5);
}
@keyframes ocean-tide{0%,100%{background:radial-gradient(ellipse at 50% 100%,rgba(38,198,218,.06) 0%,transparent 60%),#021a2e}50%{background:radial-gradient(ellipse at 50% 100%,rgba(38,198,218,.1) 0%,rgba(64,196,255,.04) 30%,transparent 65%),#021a2e}}

/* ─────────────────────────────────────────────────────────────
   TV-tile preview-helpers (kun til admin-builder)
   .tv-tile-preview wrapper sætter background + tema-aware fills
   ───────────────────────────────────────────────────────────── */
.tv-tile-preview{background:var(--bg);position:relative;animation:var(--bg-anim,none) 8s ease infinite;transition:background-color .25s ease}
.tv-tile-preview svg .tt-bg{fill:var(--bg)}
.tv-tile-preview svg .tt-accent{fill:var(--green)}
.tv-tile-preview svg .tt-yellow{fill:var(--yellow)}
.tv-tile-preview svg .tt-amber{fill:var(--amber)}
.tv-tile-preview svg .tt-blue{fill:var(--blue)}
.tv-tile-preview svg .tt-text{fill:var(--text)}
.tv-tile-preview svg .tt-text2{fill:var(--text2)}
.tv-tile-preview svg .tt-card{fill:var(--card)}
.tv-tile-preview svg .tt-border{stroke:var(--border)}