/* THEMES */

/* BLACK N WHITE */
html[data-theme="bw"]{
/* SURFACES */
--bg:0,0,0;
--panelTop:42,42,42;
--panelBot:12,12,12;
--panelTopAlt:54,54,54;
--panelBotAlt:16,16,16;
--surface:20,20,20;
--surfaceAlt:30,30,30;
--menuBg:14,14,14;
--camHover:46,46,46;
--haze:90,90,90;
--hazeShop:105,105,105;
/* FOREGROUND */
--fg:255,255,255;
--glow1:235,235,235;
--glow2:235,235,235;
--glow3:235,235,235;
--glow4:235,235,235;
/* ACCENT */
--accent:205,205,205;
--accentBright:245,245,245;
--accentGlow:190,190,190;
--accentDeep:225,225,225;
--accentText:232,232,232;
--accentTextSoft:244,244,244;
--accentLink:216,216,216;
--accentMuted:186,186,186;
--accentStrong:238,238,238;
--glassTint:150,150,150;
/* STATE */
--danger:255,255,255;
--dangerSoft:245,245,245;
--dangerBright:255,255,255;
--dangerPale:250,250,250;
--dangerDeep:58,58,58;
--dangerBan:255,255,255;
--warn:214,214,214;
--warnGlow:226,226,226;
--warnIcon:236,236,236;
--amber:222,222,222;
--proceed:64,64,64;
--quitBg:243,243,243;
--quitFg:17,17,17;
/* BRAND AND GLITCH */
--brandHackclub:214,214,214;
--brandHackclubHot:255,255,255;
--brandSlack:200,200,200;
--linkFaq:224,224,224;
/* HALLOWEEN CARDS */
--pumpkin:236,236,236;
--pumpkinSoft:220,220,220;
--pumpkinDeep:246,246,246;
--pumpkinPale:232,232,232;
--pumpkinGlow:255,255,255;
--pumpkinGlow2:230,230,230;
--pumpkinHot:240,155,80;
--pumpkinBorder:224,140,70;
--pumpkinEmber:210,110,35;
--pumpkinEmberDeep:200,105,30;
/* GLITCH MODE */
--sigA:255,255,255;
--sigB:90,90,90;
--sigC:170,170,170;
--sigLight:235,235,235;
/* MEDIA */
--mediaFilter:grayscale(1);
--mediaFilterFn:grayscale(1);
}

/* BLACK N WHITE (FNAF) */
html[data-theme="fnaf"]{
/* SURFACES */
--bg:0,0,0;
--panelTop:0,0,0;
--panelBot:0,0,0;
--panelTopAlt:0,0,0;
--panelBotAlt:0,0,0;
--surface:0,0,0;
--surfaceAlt:0,0,0;
--menuBg:0,0,0;
--camHover:0,0,0;
--haze:0,0,0;
--hazeShop:0,0,0;
/* FOREGROUND */
--fg:255,255,255;
--glow1:255,255,255;
--glow2:255,255,255;
--glow3:255,255,255;
--glow4:255,255,255;
/* ACCENT */
--accent:255,255,255;
--accentBright:255,255,255;
--accentGlow:255,255,255;
--accentDeep:255,255,255;
--accentText:255,255,255;
--accentTextSoft:255,255,255;
--accentLink:255,255,255;
--accentMuted:255,255,255;
--accentStrong:255,255,255;
--glassTint:0,0,0;
/* STATE */
--danger:255,255,255;
--dangerSoft:255,255,255;
--dangerBright:255,255,255;
--dangerPale:255,255,255;
--dangerDeep:0,0,0;
--dangerBan:255,255,255;
--warn:255,255,255;
--warnGlow:255,255,255;
--warnIcon:255,255,255;
--amber:255,255,255;
--proceed:0,0,0;
--quitBg:255,255,255;
--quitFg:0,0,0;
/* BRAND AND GLITCH */
--brandHackclub:255,255,255;
--brandHackclubHot:255,255,255;
--brandSlack:255,255,255;
--linkFaq:255,255,255;
/* HALLOWEEN CARDS */
--pumpkin:255,255,255;
--pumpkinSoft:255,255,255;
--pumpkinDeep:255,255,255;
--pumpkinPale:255,255,255;
--pumpkinGlow:255,255,255;
--pumpkinGlow2:255,255,255;
--pumpkinHot:240,155,80;
--pumpkinBorder:224,140,70;
--pumpkinEmber:210,110,35;
--pumpkinEmberDeep:200,105,30;
/* GLITCH MODE */
--sigA:230,40,40;
--sigB:60,200,255;
--sigC:255,196,60;
--sigLight:240,240,240;
/* MEDIA */
--mediaFilter:grayscale(1);
--mediaFilterFn:grayscale(1);
}

/* SHOP ARTWORK */
html[data-theme="bw"] .itemImage,
html[data-theme="bw"] .orderImage,
html[data-theme="fnaf"] .itemImage,
html[data-theme="fnaf"] .orderImage{
filter:none;
}

/* HERO BACKDROP */
html[data-theme="fnaf"] .hero > .overlay,
html[data-theme="fnaf"] .hero > .scanlines,
html[data-theme="fnaf"] .hero > .vignette{
display:none;
}

html[data-theme="fnaf"] #heroVideo{
filter:none;
}

/* HALLOWEEN */
html[data-theme="halloween"]{
/* SURFACES */
--bg:8,4,2;
--panelTop:58,22,6;
--panelBot:14,8,4;
--panelTopAlt:74,30,8;
--panelBotAlt:18,10,5;
--surface:20,12,7;
--surfaceAlt:32,19,10;
--menuBg:16,9,5;
--camHover:56,32,16;
--haze:120,40,0;
--hazeShop:140,48,0;
/* FOREGROUND */
--fg:255,244,230;
--glow1:255,205,140;
--glow2:255,205,140;
--glow3:255,205,140;
--glow4:255,205,140;
/* ACCENT */
--accent:245,158,66;
--accentBright:255,186,92;
--accentGlow:200,90,20;
--accentDeep:255,140,40;
--accentText:255,214,163;
--accentTextSoft:255,232,204;
--accentLink:255,190,110;
--accentMuted:226,178,124;
--accentStrong:255,226,186;
--glassTint:190,95,30;
/* STATE */
--danger:255,96,72;
--dangerSoft:240,60,40;
--dangerBright:255,130,110;
--dangerPale:255,214,206;
--dangerDeep:72,16,10;
--dangerBan:255,64,48;
--warn:250,196,48;
--warnGlow:255,190,70;
--warnIcon:255,210,110;
--amber:255,176,60;
--proceed:178,38,16;
--quitBg:243,238,230;
--quitFg:26,16,10;
/* BRAND AND GLITCH */
--brandHackclub:214,52,44;
--brandHackclubHot:255,90,64;
--brandSlack:120,200,190;
--linkFaq:255,196,120;
/* HALLOWEEN CARDS */
--pumpkin:255,208,92;
--pumpkinSoft:255,224,150;
--pumpkinDeep:255,190,60;
--pumpkinPale:255,240,210;
--pumpkinGlow:255,200,60;
--pumpkinGlow2:255,214,120;
--pumpkinHot:255,236,150;
--pumpkinBorder:255,214,110;
--pumpkinEmber:255,180,40;
--pumpkinEmberDeep:235,160,30;
/* GLITCH MODE */
--sigA:255,120,20;
--sigB:140,70,255;
--sigC:90,255,140;
--sigLight:255,236,200;
/* MEDIA */
--mediaFilter:sepia(0.35) saturate(1.5) hue-rotate(-15deg) contrast(1.05);
--mediaFilterFn:sepia(0.35) saturate(1.5) hue-rotate(-15deg) contrast(1.05);
}

/* RANGE SLIDER */
html[data-theme="bw"] input[type="range"]{
accent-color:#d0d0d0;
}

html[data-theme="fnaf"] input[type="range"]{
accent-color:#ffffff;
}

html[data-theme="halloween"] input[type="range"]{
accent-color:#f59e42;
}

/* HALLOWEEN CARDS KEEP THEIR PALETTE UNDER EVERY THEME */
.itemCard.hallowCard,
.modalCard.hallowModal{
/* SURFACES */
--bg:8,4,2;
--panelTop:58,22,6;
--panelBot:14,8,4;
--panelTopAlt:74,30,8;
--panelBotAlt:18,10,5;
--surface:20,12,7;
--surfaceAlt:32,19,10;
--menuBg:16,9,5;
--camHover:56,32,16;
--haze:120,40,0;
--hazeShop:140,48,0;
/* FOREGROUND */
--fg:255,244,230;
--glow1:255,205,140;
--glow2:255,205,140;
--glow3:255,205,140;
--glow4:255,205,140;
/* ACCENT */
--accent:245,158,66;
--accentBright:255,186,92;
--accentGlow:200,90,20;
--accentDeep:255,140,40;
--accentText:255,214,163;
--accentTextSoft:255,232,204;
--accentLink:255,190,110;
--accentMuted:226,178,124;
--accentStrong:255,226,186;
--glassTint:190,95,30;
/* STATE */
--danger:255,96,72;
--dangerSoft:240,60,40;
--dangerBright:255,130,110;
--dangerPale:255,214,206;
--dangerDeep:72,16,10;
--dangerBan:255,64,48;
--warn:250,196,48;
--warnGlow:255,190,70;
--warnIcon:255,210,110;
--amber:255,176,60;
--proceed:178,38,16;
--quitBg:243,238,230;
--quitFg:26,16,10;
/* BRAND AND GLITCH */
--brandHackclub:214,52,44;
--brandHackclubHot:255,90,64;
--brandSlack:120,200,190;
--linkFaq:255,196,120;
/* HALLOWEEN CARDS */
--pumpkin:255,208,92;
--pumpkinSoft:255,224,150;
--pumpkinDeep:255,190,60;
--pumpkinPale:255,240,210;
--pumpkinGlow:255,200,60;
--pumpkinGlow2:255,214,120;
--pumpkinHot:255,236,150;
--pumpkinBorder:255,214,110;
--pumpkinEmber:255,180,40;
--pumpkinEmberDeep:235,160,30;
}

html .itemCard.hallowCard{
border-color:rgba(var(--pumpkinBorder),0.75);
box-shadow:0 0 16px rgba(var(--pumpkinEmber),0.30), inset 0 0 26px rgba(var(--pumpkinEmberDeep),0.10);
}

html .itemCard.hallowCard:hover,
html .itemCard.hallowCard:focus-visible{
border-color:rgba(var(--pumpkinHot),0.75);
box-shadow:0 0 22px rgba(var(--pumpkinEmber),0.34), inset 0 0 26px rgba(var(--pumpkinEmber),0.10);
}

/* CURSOR */
@media (any-pointer: fine){
html[data-theme="halloween"],
html[data-theme="halloween"] body{
cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M2%2012s4-6%2010-6%2010%206%2010%206-4%206-10%206S2%2012%202%2012z'%20fill='%23090402'%20stroke='%23f5a04a'%20stroke-width='1.3'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3.2'%20fill='%23090402'%20stroke='%23f5a04a'%20stroke-width='0.9'/%3E%3C/svg%3E") 12 12, auto;
}

html[data-theme="halloween"] a,
html[data-theme="halloween"] button,
html[data-theme="halloween"] label,
html[data-theme="halloween"] .option,
html[data-theme="halloween"] .faqToggle,
html[data-theme="halloween"] .faqAnswer a,
html[data-theme="halloween"] .backBtn,
html[data-theme="halloween"] .warningProceed,
html[data-theme="halloween"] .warningQuit,
html[data-theme="halloween"] input[type="range"]{
cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cpath%20d='M2%2014s5-7%2012-7%2012%207%2012%207-5%207-12%207S2%2014%202%2014z'%20fill='%23090402'%20stroke='%23ffba5c'%20stroke-width='1.6'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='4.8'%20fill='%23ffd05c'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.7'%20fill='%23090402'/%3E%3C/svg%3E") 14 14, pointer;
}
}